/* =====================================================================
   forumWHU — Design-Polish Layer
   Distinctive editorial flourishes layered on top of style.css base.
   Philosophy: political feuilleton meets modern confidence.
   - Atmospheric grain on dark sections
   - Oversized Georgia quote marks
   - Ghost-numbers behind pillar content
   - Staggered page-load choreography (separate from scroll-reveal)
   - Side-labels (rotated caps) as magazine-style section markers
   - Drop-cap treatment for lead paragraphs
   - Hairline decorative rules
   - More expressive card hover
   ===================================================================== */


/* ========== Grain texture overlay on dark sections ========== */
.section--dark { position: relative; isolation: isolate; }
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.93  0 0 0 0 0.87  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 300px 300px;
}


/* ========== Hero drama ========== */
.hero {
  overflow: visible;
}
.hero__inner {
  position: relative;
}
.hero__inner > * + * {
  margin-top: var(--space-6);
}
.hero .eyebrow,
.hero .tag,
.hero .tag--solid {
  align-self: flex-start;
  width: auto;
}
.hero .eyebrow,
.hero .tag--solid {
  animation: polish-in 800ms var(--ease-out) both;
}
.hero h1,
.hero__headline {
  animation: polish-in 900ms var(--ease-out) 120ms both;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero .lead {
  animation: polish-in 900ms var(--ease-out) 240ms both;
  text-wrap: pretty;
}
.hero__actions {
  animation: polish-in 900ms var(--ease-out) 360ms both;
}
.hero__scroll {
  animation: polish-in 1200ms var(--ease-out) 600ms both;
}
@keyframes polish-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* Hero side-label — magazine style marginalia */
.hero::before {
  content: "EDITION 2026";
  position: absolute;
  top: 50%;
  left: max(2vw, 16px);
  transform: rotate(-90deg) translateX(50%);
  transform-origin: left top;
  font-family: var(--font-body-stack);
  font-size: 11px;
  letter-spacing: 0.35em;
  color: var(--color-orange);
  opacity: 0.75;
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .hero::before { display: none; }
}


/* ========== Oversized decorative quote marks ========== */
.quote {
  position: relative;
  padding-left: var(--space-12);
  text-wrap: balance;
}
.quote::before {
  content: "\201C"; /* curly left-quote */
  position: absolute;
  left: -8px;
  top: -0.35em;
  font-family: var(--font-display-stack);
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 1;
  color: var(--color-orange);
  font-style: normal;
}
.section--dark .quote::before { color: var(--color-orange); opacity: 0.9; }
/* Remove left-border variant in favor of oversized mark */
.quote { border-left: 0; }


/* ========== Ghost numbers behind pillars ========== */
.pillar {
  position: relative;
  padding-top: var(--space-4);
}
.pillar__num {
  font-family: var(--font-display-stack);
  font-size: clamp(5rem, 10vw, 9rem);
  line-height: 0.85;
  color: var(--color-orange);
  opacity: 0.18;
  margin-bottom: calc(-1 * var(--space-6));
  letter-spacing: -0.04em;
  font-feature-settings: "lnum" 1;
  transition: opacity var(--dur-hover) var(--ease-out);
}
.pillar:hover .pillar__num { opacity: 0.35; }
.pillar h3 {
  position: relative;
  font-size: var(--font-h2);
  letter-spacing: -0.01em;
}
.pillar h3::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--color-orange);
  margin-bottom: var(--space-4);
}


/* ========== Drop-cap for section leads ========== */
.drop-cap::first-letter,
.lead--drop::first-letter {
  font-family: var(--font-display-stack);
  font-size: 3.2em;
  line-height: 0.85;
  float: left;
  padding-right: 0.08em;
  padding-top: 0.05em;
  color: var(--color-orange);
  font-weight: 400;
}


/* ========== Refined card hover ========== */
.card--speaker {
  transition: transform 400ms var(--ease-out),
              box-shadow 400ms var(--ease-out);
}
.card--speaker:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(6, 22, 56, 0.35);
}
.card--speaker:hover .card--speaker__image img {
  transform: scale(1.04);
}
.card--speaker__name {
  position: relative;
  display: inline-block;
}
.card--speaker__name::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  height: 2px;
  width: 0;
  background: var(--color-orange);
  transition: width 350ms var(--ease-out);
}
.card--speaker:hover .card--speaker__name::after { width: 100%; }

.card--partner {
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.card--partner:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -18px rgba(6, 22, 56, 0.25);
}
.card--partner:hover img { filter: grayscale(0); opacity: 1; }

.card--package:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -20px rgba(6, 22, 56, 0.3);
}


/* ========== Editorial hairlines + section intros ========== */
.divider--orange {
  height: 3px;
  width: 56px;
  transition: width 350ms var(--ease-out);
}
section:hover .divider--orange { width: 84px; }

.eyebrow {
  position: relative;
  padding-left: 28px;
}
.eyebrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 18px;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
}


/* ========== Refined stat numbers ========== */
.stat__number {
  font-feature-settings: "lnum" 1, "tnum" 0;
  letter-spacing: -0.03em;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
}
.stat {
  position: relative;
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-orange);
}
.section--dark .stat { border-top-color: var(--color-orange); }


/* ========== Display headlines — tighter tracking ========== */
.display {
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1, h2 { text-wrap: balance; }
p, .lead { text-wrap: pretty; }


/* ========== Better buttons — subtle rise on hover ========== */
.button { position: relative; overflow: hidden; }
.button:hover { transform: translateY(-1px); }
.button--primary {
  box-shadow: 0 6px 20px -10px rgba(240, 129, 0, 0.55);
}
.button--primary:hover {
  box-shadow: 0 10px 28px -10px rgba(240, 129, 0, 0.7);
}
.button--ghost {
  position: relative;
  padding-left: 2px;
}
.button--ghost::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-orange);
  transform-origin: left;
  transition: transform 300ms var(--ease-out);
}
.button--ghost:hover::after { transform: scaleX(1.08); }


/* ========== Navy sections — subtle orange hairline top ========== */
.section--dark + .section--light,
.section--light + .section--dark {
  position: relative;
}


/* ========== Schirmherr-Card dramatic ========== */
.schirmherr-card {
  position: relative;
  overflow: hidden;
  background: var(--color-beige-400);
  padding: var(--space-16) var(--space-12);
}
.schirmherr-card::before {
  content: "SCHIRMHERR";
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  font-family: var(--font-body-stack);
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--color-orange);
  opacity: 0.4;
}
.schirmherr-card__body h2 {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}


/* ========== Final-CTA refined ========== */
.final-cta h2 {
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.final-cta .divider--orange {
  margin: 0 auto var(--space-8) auto;
}


/* ========== Nav refined ========== */
.nav {
  transition: background-color 400ms var(--ease-out),
              box-shadow 400ms var(--ease-out),
              backdrop-filter 400ms var(--ease-out);
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  box-shadow: 0 1px 0 rgba(6, 22, 56, 0.08), 0 8px 30px -18px rgba(6, 22, 56, 0.18);
}
.nav__link {
  position: relative;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 2px;
  background: var(--color-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms var(--ease-out);
}
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active::after { display: block; }

/* ========== Logo Motion — shine-sweep + scroll-shrink polish ========== */
.nav__logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  isolation: isolate;
}
.nav__logo img {
  transition: height 500ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 400ms var(--ease-out),
              transform 400ms var(--ease-out);
  transform-origin: left center;
  will-change: height, transform;
  filter: drop-shadow(0 2px 6px rgba(6, 22, 56, 0.0));
}
.nav__logo:hover img {
  filter: drop-shadow(0 4px 14px rgba(240, 129, 0, 0.28));
  transform: scale(1.015);
}
.nav__logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 46%,
    rgba(240, 129, 0, 0.2) 52%,
    transparent 68%
  );
  transform: translateX(-160%) skewX(-12deg);
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
  border-radius: 4px;
}
.nav__logo:hover::after {
  transform: translateX(160%) skewX(-12deg);
}
.nav.is-scrolled .nav__logo img {
  filter: drop-shadow(0 1px 3px rgba(6, 22, 56, 0.12));
}
@media (prefers-reduced-motion: reduce) {
  .nav__logo::after { display: none; }
  .nav__logo:hover img { transform: none; }
}


/* ========== Agenda item hover ========== */
.agenda-item {
  transition: background-color var(--dur-hover) var(--ease-out),
              padding-left var(--dur-hover) var(--ease-out);
  padding-inline: var(--space-4);
  margin-inline: calc(-1 * var(--space-4));
  border-radius: var(--radius-sm);
}
.agenda-item:hover {
  background: var(--color-beige-400);
  padding-left: var(--space-8);
}


/* ========== Archive year hover ========== */
.archive-year__year {
  transition: color 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.archive-year:hover .archive-year__year {
  transform: translateX(8px);
}


/* ========== Footer refined ========== */
.footer {
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.93  0 0 0 0 0.87  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 300px 300px;
}
.footer__claim {
  font-size: var(--font-h3);
  letter-spacing: -0.01em;
}
.footer__logo {
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 400ms var(--ease-out);
}
.footer__logo:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 6px 14px rgba(240, 129, 0, 0.35));
}
.footer__links a {
  position: relative;
  transition: color var(--dur-hover) var(--ease-out);
}
.footer__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--color-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease-out);
}
.footer__links a:hover::after {
  transform: scaleX(1);
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.7;
  transition: opacity var(--dur-hover) var(--ease-out),
              transform var(--dur-hover) var(--ease-out),
              background-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.footer__social a:hover {
  opacity: 1;
  background: var(--color-orange);
  color: var(--color-navy);
  border-color: var(--color-orange);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .footer__logo:hover,
  .footer__social a:hover { transform: none; }
}


/* ========== Speaker-Detail hero rhythm ========== */
.speaker-detail h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.speaker-detail__bio h3 {
  position: relative;
  padding-left: var(--space-6);
}
.speaker-detail__bio h3::before {
  content: "";
  position: absolute;
  left: 0; top: 0.65em;
  width: 14px;
  height: 2px;
  background: var(--color-orange);
}


/* ========== Filter-bar refined ========== */
.filter-bar__btn {
  position: relative;
  overflow: hidden;
}
.filter-bar__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-navy);
  transform: translateY(100%);
  transition: transform 300ms var(--ease-out);
  z-index: -1;
}
.filter-bar__btn:hover::after,
.filter-bar__btn.is-active::after { transform: translateY(0); }
.filter-bar__btn { isolation: isolate; }


/* ========== Reduced-motion — honor ========== */
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow,
  .hero .tag--solid,
  .hero h1,
  .hero__headline,
  .hero .lead,
  .hero__actions,
  .hero__scroll {
    animation: none;
  }
  .section--dark::before,
  .footer::before { opacity: 0.15; }
}


/* ========== Responsive refinement ========== */
@media (max-width: 768px) {
  .quote { padding-left: var(--space-8); }
  .quote::before { font-size: 4rem; left: 0; }
  .pillar__num { font-size: 5rem; }
  .schirmherr-card { padding: var(--space-8); }
  .schirmherr-card::before { display: none; }
}


/* =====================================================================
   Hero with background image + dark overlay
   ===================================================================== */
.hero--image {
  background:
    linear-gradient(135deg, rgba(6, 22, 56, 0.82) 0%, rgba(6, 22, 56, 0.68) 50%, rgba(6, 22, 56, 0.88) 100%),
    url("/assets/images/hero/hero-2025.webp") center/cover no-repeat;
  background-attachment: scroll;
}
.hero--image::before {
  /* raise grain opacity slightly for atmosphere over photo */
  opacity: 0.45;
}
@media (max-width: 768px) {
  .hero--image {
    background:
      linear-gradient(180deg, rgba(6, 22, 56, 0.88) 0%, rgba(6, 22, 56, 0.78) 100%),
      url("/assets/images/hero/hero-2025.webp") center/cover no-repeat;
  }
}


/* =====================================================================
   Metallic Partner-Pakete — Tier-Differenzierung
   ===================================================================== */

:root {
  --metal-platin: #c9cdd3;
  --metal-platin-shine: #eef1f5;
  --metal-gold-warm: #c9a24b;
  --metal-gold-shine: #e9cd7c;
  --metal-silber: #b5b9bf;
  --metal-silber-shine: #dee1e6;
}

/* Base — override style.css top-only border with full 2px border */
.card--package {
  border-top: 0;
  border: 2px solid var(--color-orange);
  background: var(--color-white);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Tag inside package — consistent full-width chip at top */
.card--package .tag {
  align-self: flex-start;
  font-weight: 600;
}

/* HAUPTPARTNER — Navy bg with gold shimmer */
.card--package--haupt {
  background: var(--color-navy);
  color: var(--color-beige);
  border: 1.5px solid var(--metal-gold-shine);
  box-shadow: 0 20px 44px -22px rgba(201, 162, 75, 0.4),
              inset 0 1px 0 rgba(233, 205, 124, 0.2);
}
.card--package--haupt h3,
.card--package--haupt .card--package__benefits li {
  color: var(--color-beige);
}
.card--package--haupt .tag {
  background: linear-gradient(135deg, var(--metal-gold-warm) 0%, var(--metal-gold-shine) 50%, var(--metal-gold-warm) 100%);
  color: var(--color-navy);
  border-color: transparent;
  font-weight: 600;
}
/* Gleam sweep — diagonal highlight animates across on hover */
.card--package--haupt::after {
  content: "";
  position: absolute;
  inset: -50% -10%;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(233, 205, 124, 0.28) 48%,
    rgba(255, 255, 255, 0.08) 52%,
    transparent 65%);
  transform: translateX(-120%);
  transition: transform 900ms var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.card--package--haupt:hover::after {
  transform: translateX(120%);
}
.card--package--haupt > * { position: relative; z-index: 1; }
.card--package--haupt:hover {
  box-shadow: 0 28px 56px -22px rgba(201, 162, 75, 0.55),
              inset 0 1px 0 rgba(233, 205, 124, 0.3);
}

/* PLATIN */
.card--package--platin {
  background: linear-gradient(180deg, var(--color-white) 0%, #fafbfc 100%);
  border: 2px solid var(--metal-platin);
  border-image: linear-gradient(135deg,
    var(--metal-platin) 0%,
    var(--metal-platin-shine) 50%,
    var(--metal-platin) 100%) 1;
}
.card--package--platin .tag {
  background: linear-gradient(135deg, var(--metal-platin) 0%, var(--metal-platin-shine) 50%, var(--metal-platin) 100%);
  color: var(--color-navy);
  border-color: transparent;
}
.card--package--platin:hover {
  box-shadow: 0 20px 40px -20px rgba(180, 186, 194, 0.5);
}

/* GOLD */
.card--package--gold {
  background: linear-gradient(180deg, var(--color-white) 0%, #fffaf0 100%);
  border: 2px solid var(--metal-gold-warm);
  border-image: linear-gradient(135deg,
    var(--metal-gold-warm) 0%,
    var(--metal-gold-shine) 50%,
    var(--metal-gold-warm) 100%) 1;
}
.card--package--gold .tag {
  background: linear-gradient(135deg, var(--metal-gold-warm) 0%, var(--metal-gold-shine) 50%, var(--metal-gold-warm) 100%);
  color: var(--color-navy);
  border-color: transparent;
}
.card--package--gold:hover {
  box-shadow: 0 20px 40px -20px rgba(201, 162, 75, 0.45);
}

/* SILBER */
.card--package--silber {
  background: linear-gradient(180deg, var(--color-white) 0%, #f7f8f9 100%);
  border: 2px solid var(--metal-silber);
  border-image: linear-gradient(135deg,
    var(--metal-silber) 0%,
    var(--metal-silber-shine) 50%,
    var(--metal-silber) 100%) 1;
}
.card--package--silber .tag {
  background: linear-gradient(135deg, var(--metal-silber) 0%, var(--metal-silber-shine) 50%, var(--metal-silber) 100%);
  color: var(--color-navy);
  border-color: transparent;
}
.card--package--silber:hover {
  box-shadow: 0 20px 40px -20px rgba(165, 170, 178, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .card--package--haupt::after { display: none; }
}

/* Alignment — gleichmäßige CTA-Baseline über alle Tier-Karten */
.card--package {
  justify-content: space-between;
}
.card--package > .button {
  margin-top: auto;
  align-self: flex-start;
}

/* Not-included Benefits — grau, Minus, strikethrough */
.card--package__benefits li.is-muted {
  color: var(--color-grey-300);
  text-decoration: line-through;
  text-decoration-color: var(--color-grey-200);
  text-decoration-thickness: 1px;
}
.card--package__benefits li.is-muted::before {
  content: "−";
  color: var(--color-grey-300);
}
.card--package--haupt .card--package__benefits li.is-muted {
  color: var(--color-beige-300);
  opacity: 0.5;
  text-decoration-color: rgba(244, 238, 224, 0.3);
}
.card--package--haupt .card--package__benefits li.is-muted::before {
  color: var(--color-beige-300);
}


/* =====================================================================
   Button Gold — metallic tier-style CTA for Partner-Werden
   ===================================================================== */

.button--gold {
  background: linear-gradient(135deg, var(--metal-gold-warm) 0%, var(--metal-gold-shine) 50%, var(--metal-gold-warm) 100%);
  background-size: 200% 100%;
  background-position: 0% 0%;
  color: var(--color-navy);
  border: 1px solid var(--metal-gold-warm);
  box-shadow: 0 8px 22px -10px rgba(201, 162, 75, 0.55);
  transition: background-position 600ms var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out),
              transform var(--dur-hover) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.button--gold:hover {
  background-position: 100% 0%;
  color: var(--color-navy);
  box-shadow: 0 14px 30px -12px rgba(201, 162, 75, 0.7);
  transform: translateY(-1px);
}
.button--gold::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
  transform: translateX(-150%);
  transition: transform 900ms var(--ease-out);
  pointer-events: none;
}
.button--gold:hover::after {
  transform: translateX(300%);
}
.section--dark .button--gold {
  color: var(--color-navy);
}
@media (prefers-reduced-motion: reduce) {
  .button--gold::after { display: none; }
  .button--gold:hover { transform: none; }
}


/* =====================================================================
   Download-Link Utility — compact inline download CTA
   ===================================================================== */

.download-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body-stack);
  font-size: var(--font-body);
  font-weight: 500;
  color: var(--color-orange);
  padding-bottom: 3px;
  border-bottom: 2px solid var(--color-orange);
  transition: color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
  align-self: flex-start;
  text-decoration: none;
  line-height: 1.2;
  width: fit-content;
}
.download-link:hover {
  color: var(--color-orange-400);
  border-color: var(--color-orange-400);
}
.download-link__icon {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-hover) var(--ease-out);
  flex-shrink: 0;
}
.download-link:hover .download-link__icon {
  transform: translateY(2px);
}
@media (prefers-reduced-motion: reduce) {
  .download-link:hover .download-link__icon { transform: none; }
}


/* =====================================================================
   Team Mail Button — paper-plane CTA per team card
   ===================================================================== */

.team-mail {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 6px 14px;
  font-family: var(--font-body-stack);
  font-size: var(--font-xs);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-navy);
  background: var(--color-beige-400);
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-pill);
  transition: background var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out),
              transform var(--dur-hover) var(--ease-out);
  text-decoration: none;
  width: fit-content;
}
.team-mail:hover {
  background: var(--color-navy);
  color: var(--color-beige);
  transform: translateY(-1px);
}
.team-mail__icon {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-hover) var(--ease-out);
  flex-shrink: 0;
}
.team-mail:hover .team-mail__icon {
  transform: translateX(2px) rotate(-12deg);
}
@media (prefers-reduced-motion: reduce) {
  .team-mail:hover { transform: none; }
  .team-mail:hover .team-mail__icon { transform: none; }
}


/* =====================================================================
   Agenda Hero Figure — full-bleed impression between hero and tabs
   ===================================================================== */

.agenda-hero {
  margin: 0;
  width: 100%;
  max-height: 420px;
  overflow: hidden;
  background: var(--color-navy);
}
.agenda-hero img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: inherit;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 768px) {
  .agenda-hero { max-height: 280px; }
}


/* =====================================================================
   Page-load fade — overall document enter
   ===================================================================== */

html { overflow-x: hidden; }
body {
  animation: page-enter 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes page-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}


/* =====================================================================
   Secondary page headers — marginalia + refined eyebrow
   Scope: Kongress / Speaker / Agenda / Partner / Team / Archiv / Presse
   Applies on section.section--dark.section--sm (schmaler Hero unter Nav)
   ===================================================================== */

.section--dark.section--sm {
  position: relative;
}
.section--dark.section--sm .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-left: 0;
}
.section--dark.section--sm .eyebrow::before {
  content: "";
  position: static;
  width: 32px;
  height: 1px;
  background: var(--color-orange);
  display: inline-block;
  transform: none;
}

/* Marginalia side-label (desktop only) — Zweitseiten */
.section--dark.section--sm::after {
  content: attr(data-sidelabel);
  position: absolute;
  top: 50%;
  right: max(2vw, 16px);
  transform: rotate(90deg) translateX(-50%);
  transform-origin: right top;
  font-family: var(--font-body-stack);
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--color-orange);
  opacity: 0;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}
.section--dark.section--sm[data-sidelabel]::after {
  display: none;
}
@media (max-width: 1024px) {
  .section--dark.section--sm::after { display: none; }
}


/* =====================================================================
   Editorial image frame — for large content images (impressions, hero figs)
   ===================================================================== */

.frame--editorial {
  position: relative;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(240, 129, 0, 0.08), rgba(240, 129, 0, 0)) border-box,
    var(--color-beige);
  border: 1px solid rgba(6, 22, 56, 0.08);
}
.frame--editorial::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 28px; height: 28px;
  border-top: 2px solid var(--color-orange);
  border-left: 2px solid var(--color-orange);
  pointer-events: none;
}
.frame--editorial::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 28px; height: 28px;
  border-bottom: 2px solid var(--color-orange);
  border-right: 2px solid var(--color-orange);
  pointer-events: none;
}
.frame--editorial img {
  display: block;
  width: 100%;
  height: auto;
}


/* =====================================================================
   Section kicker — tiny number marker before H2s (auto-numbering variant)
   ===================================================================== */

.section--light h2,
.section--light-alt h2 {
  position: relative;
}

/* Refined display letter-spacing on hero h1 — tighten slightly for impact */
.hero h1,
.hero__headline {
  letter-spacing: -0.025em;
}


/* =====================================================================
   Refined scroll-reveal easing (overrides main.js defaults where needed)
   ===================================================================== */

.reveal {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}


/* =====================================================================
   Agenda item — refined chevron + time-emphasis
   ===================================================================== */

.agenda-item__time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}


/* =====================================================================
   Stat numbers — gold accent on Haupt-Highlight
   ===================================================================== */

.stats-bar .stat:first-child .stat__number {
  background: linear-gradient(135deg, var(--color-orange) 0%, #ffb84d 50%, var(--color-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* =====================================================================
   Anchor-focus-visible — a11y polish for keyboard users
   ===================================================================== */

:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
  border-radius: 3px;
}
.button:focus-visible {
  outline-offset: 4px;
}