/* ============================================
   NOW CONSULTING — RECRUITING LANDINGPAGE
   Vertriebsmitarbeiter (m/w/d)
   Dark & Premium Design System
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
  --gold: #C9A84C;
  --gold-light: #E2C97A;
  --gold-dark: #A07830;
  --black: #0e0c0a;
  --surface: #181410;
  --surface-2: #211d18;
  --border: rgba(201, 168, 76, 0.28);
  --text: #f2efe9;
  --text-muted: #9e9a94;
  --text-dim: #6a6560;
  --white: #ffffff;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --radius: 4px;
  --radius-lg: 12px;
  --transition: 0.3s ease;
  --max-width: 1140px;
  --section-pad: 80px;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* Sicherheitsnetz, NICHT die Reparatur: overflow-x am body allein wirkt
     nicht — ohne overflow am html wandert der Wert des body per
     CSS-Spezifikation auf den Viewport, und der body benutzt intern
     'visible', clippt also gar nichts. Nachgewiesen mit einer Sonde bei
     left:1200px: die Scroll-Breite stieg von 377 auf 1260.
     hidden zuerst als Rueckfall fuer iOS < 16, clip danach: clip gewinnt
     wo unterstuetzt und macht das Wurzelelement nicht zum Scroll-Container. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* Deutsche Komposita wie "Unternehmensberatung" oder "Vertriebsmitarbeiter"
   sind laenger als eine Zeile auf 320px. Ohne Trennung ragt der Text aus
   seinem Element heraus und verbreitert das Dokument, obwohl das Element
   selbst schmal bleibt. hyphens: auto trennt an Silben (die Seite ist als
   lang="de" ausgezeichnet), overflow-wrap ist der harte Rueckfall. */
h1, h2, h3, h4,
.hero__headline,
.section__title,
.statement__title,
.funnel-step__title,
.legal-modal__title,
.cookie-modal__title,
.ausbildung__name {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

p, li, figcaption, .btn, .team-card__text, .unternehmen__text {
  overflow-wrap: break-word;
}

body {
  background-color: var(--black);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video {
  max-width: 100%;
  display: block;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* --- Utility --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.gold { color: var(--gold); }

.section {
  padding: var(--section-pad) 0;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn--gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--black);
  box-shadow: 0 0 18px rgba(201, 168, 76, 0.28), 0 4px 16px rgba(201, 168, 76, 0.18);
  position: relative;
  transition: all var(--transition), transform 0.15s ease-out;
}

.btn--gold:hover {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  transform: translateY(-2px);
  box-shadow: 0 0 36px rgba(201, 168, 76, 0.55), 0 8px 32px rgba(201, 168, 76, 0.35);
}

.btn--large {
  padding: 18px 48px;
  font-size: 1rem;
  min-height: 56px;
}

.btn--full {
  width: 100%;
}

/* --- Scroll Reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-item.visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- Section Headers --- */
.section__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 20px;
}

.section__title em {
  font-style: italic;
  color: var(--gold);
}

.section__subtitle {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 580px;
  line-height: 1.7;
}

.section__header {
  text-align: center;
  margin-bottom: 64px;
}

.section__header .section__subtitle {
  margin: 0 auto;
}

/* ============================================
   HERO
   ============================================ */
.hero {
  display: flex;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  padding: 60px 0 40px;
}

.hero__matrix {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.18;
  pointer-events: none;
}

.hero__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%, rgba(201, 168, 76, 0.13) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 75%, rgba(201, 168, 76, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 10% 60%, rgba(201, 168, 76, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse 80% 30% at 50% 100%, rgba(201, 168, 76, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

.hero__bg-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(201, 168, 76, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 50% 35% at 80% 20%, rgba(201, 168, 76, 0.05) 0%, transparent 50%);
  animation: heroShimmer 8s ease-in-out infinite alternate;
}

@keyframes heroShimmer {
  0%   { opacity: 0.4; transform: scale(1) translateY(0); }
  50%  { opacity: 0.9; transform: scale(1.05) translateY(-10px); }
  100% { opacity: 0.5; transform: scale(1) translateY(0); }
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

.hero__top-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 100px;
  padding: 8px 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  margin-bottom: 24px;
}

.hero__date-icon {
  font-size: 0.85rem;
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.4vw, 4.3rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 28px;
}

.hero__headline em {
  font-style: italic;
  color: var(--gold);
}

.hero__subline {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.hero__date-info {
  margin-top: 16px;
  margin-bottom: 20px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.hero__video {
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  margin: 0 auto 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
}

.hero__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Video Replay Overlay */
.hero__video-replay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.hero__video-replay.visible {
  opacity: 1;
  pointer-events: auto;
}

.hero__video-replay-btn {
  width: 80px;
  height: 80px;
  background: none;
  border: none;
  color: var(--gold);
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.hero__video-replay-btn:hover {
  transform: scale(1.12);
  color: var(--gold-light);
}

.hero__video-replay-btn svg {
  width: 100%;
  height: 100%;
}

/* ============================================
   UNTERNEHMEN
   ============================================ */
.unternehmen {
  background:
    radial-gradient(ellipse 65% 55% at 95% 5%,  rgba(201, 168, 76, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 5%  95%, rgba(201, 168, 76, 0.12) 0%, transparent 50%),
    var(--surface);
  position: relative;
}

.unternehmen::before,
.unternehmen::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.55) 30%, rgba(201, 168, 76, 0.55) 70%, transparent);
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.35), 0 0 28px rgba(201, 168, 76, 0.15);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.unternehmen::before { top: 0; }
.unternehmen::after  { bottom: 0; }

.unternehmen.section-divider-visible::before,
.unternehmen.section-divider-visible::after {
  opacity: 1;
}

.unternehmen__inner {
  max-width: 800px;
  margin: 0 auto;
}

/* Team-Mini: 5 runde Portraits oben in der Section */
.unternehmen__team-mini {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 20px auto 48px;
  flex-wrap: nowrap;
}

.team-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  border: 1.5px solid rgba(201, 168, 76, 0.45);
  box-shadow: 0 0 14px rgba(201, 168, 76, 0.18), 0 4px 12px rgba(0, 0, 0, 0.4);
  background: var(--surface-2);
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
  cursor: default;
}

.team-circle:hover {
  transform: translateY(-3px) scale(1.08);
  border-color: var(--gold);
  box-shadow: 0 0 24px rgba(201, 168, 76, 0.55), 0 6px 18px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.team-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

@media (max-width: 480px) {
  .team-circle {
    width: 48px;
    height: 48px;
  }
  .unternehmen__team-mini {
    gap: 12px;
    margin: 16px auto 36px;
  }
}

.unternehmen__content {
  margin-bottom: 48px;
}

.unternehmen__text {
  font-size: 0.975rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 16px;
  text-align: center;
}

.unternehmen__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 12px;
  margin: 32px 0 36px;
}

.unternehmen__stat {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.08) 0%, rgba(201, 168, 76, 0.03) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

.unternehmen__stat-num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1;
}

.unternehmen__stat-label {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  /* Kein nowrap: "verdient Stefan im Monat" ist breiter als die Kachel und
     schob das Dokument auf 320px um 48px auf. Umbrechen statt ueberstehen. */
  white-space: normal;
  line-height: 1.3;
}

/* ============================================
   TEAM
   ============================================ */
.team-section {
  background:
    radial-gradient(ellipse 55% 40% at 5% 95%, rgba(201, 168, 76, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse 65% 55% at 95% 5%, rgba(201, 168, 76, 0.10) 0%, transparent 55%),
    var(--surface);
  position: relative;
}

.team-section::before,
.team-section::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.55) 30%, rgba(201, 168, 76, 0.55) 70%, transparent);
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.35), 0 0 28px rgba(201, 168, 76, 0.15);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.team-section::before { top: 0; }
.team-section::after  { bottom: 0; }

.team-section.section-divider-visible::before,
.team-section.section-divider-visible::after {
  opacity: 1;
}

/* Flexbox statt Grid: bei ungerader Kartenzahl bleibt die letzte Reihe zentriert */
.team__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.team-card {
  flex: 0 1 calc(20% - 16px);
  min-width: 0;
  background: linear-gradient(160deg, #1a1510 0%, #0e0c0a 100%);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: center;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.team-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
}

.team-card__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(201, 168, 76, 0.06) 0%, transparent 60%),
    var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.team-card__body {
  padding: 16px 14px 20px;
}

.team-card__text {
  font-size: 0.78rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-dim);
  margin-top: 10px;
  text-align: center;
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(15%) brightness(0.9);
  transition: filter 0.5s ease;
}

.team-card:hover .team-card__photo img {
  filter: grayscale(0%) brightness(1);
}

.team-card__initial {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  color: var(--gold);
  opacity: 0.3;
}

/* Hochformat-Portraits: Bildausschnitt aufs Gesicht setzen */
.team-card__photo--portrait {
  object-position: center 20%;
}

.team-card__name {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}

.team-card__role {
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

/* ============================================
   DEINE ROLLE
   ============================================ */
.rolle-section {
  background:
    radial-gradient(ellipse 60% 50% at 8% 8%, rgba(201, 168, 76, 0.13) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 92% 92%, rgba(201, 168, 76, 0.10) 0%, transparent 50%),
    var(--black);
  position: relative;
}

.rolle-section::before,
.rolle-section::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.55) 30%, rgba(201, 168, 76, 0.55) 70%, transparent);
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.35), 0 0 28px rgba(201, 168, 76, 0.15);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.rolle-section::before { top: 0; }
.rolle-section::after  { bottom: 0; }

.rolle-section.section-divider-visible::before,
.rolle-section.section-divider-visible::after {
  opacity: 1;
}

.rolle__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
  align-items: stretch;
}

.rolle-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #1a1510 0%, #0e0c0a 100%);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: var(--radius-lg);
  padding: 32px 26px 26px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.rolle-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
}

/* Stufe 1 — hervorgehoben, hier startet jeder */
.rolle-card--start {
  border-color: rgba(201, 168, 76, 0.55);
  box-shadow: 0 0 24px rgba(201, 168, 76, 0.12);
}

.rolle-card__stage {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 16px;
}

.rolle-card__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 12px;
}

.rolle-card__text {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 16px;
}

.rolle-card__note {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--gold);
  line-height: 1.6;
}

.rolle__process-note {
  max-width: 780px;
  margin: 36px auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.75;
}

.rolle__requirements {
  max-width: 900px;
  margin: 56px auto 0;
  padding: 36px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.rolle__req-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 24px;
  text-align: center;
}

.rolle__req-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 32px;
}

.rolle__req-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.rolle__req-icon {
  flex-shrink: 0;
  color: var(--gold);
  font-size: 0.8rem;
  line-height: 1.75;
}

/* ============================================
   EVENTS
   ============================================ */
.events-section {
  background:
    radial-gradient(ellipse 65% 55% at 95% 5%, rgba(201, 168, 76, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 5% 95%, rgba(201, 168, 76, 0.10) 0%, transparent 50%),
    var(--surface);
  position: relative;
}

.events-section::before,
.events-section::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.55) 30%, rgba(201, 168, 76, 0.55) 70%, transparent);
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.35), 0 0 28px rgba(201, 168, 76, 0.15);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.events-section::before { top: 0; }
.events-section::after  { bottom: 0; }

.events-section.section-divider-visible::before,
.events-section.section-divider-visible::after {
  opacity: 1;
}

.events__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.event-card {
  background: linear-gradient(160deg, #1a1510 0%, #0e0c0a 100%);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.event-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
}

.event-card__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
}

.event-card__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.event-card__body {
  padding: 24px 20px;
}

.event-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 12px;
}

.event-card__text {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 16px;
}

.event-card__highlight {
  font-size: 0.85rem;
  color: var(--gold);
  font-style: italic;
  line-height: 1.6;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials {
  background:
    radial-gradient(ellipse 65% 55% at 95% 5%, rgba(201, 168, 76, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 5% 95%, rgba(201, 168, 76, 0.12) 0%, transparent 50%),
    var(--black);
  position: relative;
}

.testimonials::before,
.testimonials::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.55) 30%, rgba(201, 168, 76, 0.55) 70%, transparent);
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.35), 0 0 28px rgba(201, 168, 76, 0.15);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.testimonials::before { top: 0; }
.testimonials::after  { bottom: 0; }

.testimonials.section-divider-visible::before,
.testimonials.section-divider-visible::after {
  opacity: 1;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.testi-card {
  background: linear-gradient(160deg, #1a1510 0%, #0e0c0a 100%);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.testi-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
}

.testi-card__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
}

.testi-card__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Replay overlay for testimonial videos */
.video-replay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.video-replay.visible {
  opacity: 1;
  pointer-events: auto;
}

.video-replay-btn {
  width: 56px;
  height: 56px;
  background: none;
  border: none;
  color: var(--gold);
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.video-replay-btn:hover {
  transform: scale(1.12);
  color: var(--gold-light);
}

.video-replay-btn svg {
  width: 100%;
  height: 100%;
}

.testi-card__name {
  padding: 14px 16px 4px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
}

.testi-card__role {
  padding: 0 16px 14px;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-align: center;
}

/* Testimonial reveal animation */
.reveal-testi {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-testi.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   BEWERBUNGSFUNNEL (Fullscreen Overlay)
   ============================================ */
.funnel-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background:
    radial-gradient(ellipse 75% 75% at 50% 50%, rgba(201, 168, 76, 0.10) 0%, transparent 65%),
    rgba(10, 8, 6, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  overflow: hidden;
}

.funnel-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.funnel-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.6);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  width: 0%;
  z-index: 2;
}

.funnel-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 8px 12px;
  transition: color var(--transition);
  z-index: 3;
}

.funnel-close:hover {
  color: var(--gold);
}

.funnel-step {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(60px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.funnel-step.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}

.funnel-step.exit-left {
  opacity: 0;
  transform: translateX(-60px);
  pointer-events: none;
}

.funnel-step__inner {
  text-align: center;
  max-width: 640px;
  width: 100%;
  padding: 24px;
}

.funnel-step__count {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}

.funnel-step__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 40px;
}

.funnel-step__title em {
  font-style: italic;
  color: var(--gold);
}

.funnel-step__sub {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 36px;
}

/* Funnel Option Buttons */
.funnel-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}

.funnel-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 28px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  width: 100%;
}

.funnel-option:hover {
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.08);
  transform: translateX(6px);
}

.funnel-option.selected {
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.12);
  box-shadow: 0 0 20px rgba(201, 168, 76, 0.2);
}

.funnel-option__icon {
  color: var(--gold);
  opacity: 0.3;
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: opacity 0.3s ease, text-shadow 0.3s ease;
}

.funnel-option:hover .funnel-option__icon,
.funnel-option.selected .funnel-option__icon {
  opacity: 1;
  text-shadow: 0 0 10px rgba(201, 168, 76, 0.7);
}

.bewerbung__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}

.form__input {
  width: 100%;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition), background var(--transition);
  min-height: 52px;
  -webkit-appearance: none;
}

.form__input::placeholder {
  color: var(--text-dim);
}

.form__input:focus {
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.04);
  box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(201, 168, 76, 0.2), 0 0 40px rgba(201, 168, 76, 0.08);
}

.form__input.error {
  border-color: #c0392b;
  background: rgba(192, 57, 43, 0.05);
}

.form__phone-wrap.error {
  border-color: #c0392b;
  background: rgba(192, 57, 43, 0.05);
}

.form__error-msg {
  display: none;
  font-size: 0.78rem;
  color: #e05555;
  margin-top: -8px;
  padding-left: 4px;
}

.form__error-msg.visible {
  display: block;
}

.form__note {
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  margin-top: 4px;
}

.form__phone-wrap {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color var(--transition);
}

.form__phone-wrap:focus-within {
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.04);
  box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(201, 168, 76, 0.2), 0 0 40px rgba(201, 168, 76, 0.08);
}

.form__select {
  width: 80px;
  flex-shrink: 0;
  padding: 16px 6px;
  text-align: center;
  background: rgba(201, 168, 76, 0.06);
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text);
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  min-height: 52px;
}

.form__select option {
  background: var(--surface);
  color: var(--text);
}

.form__input--tel {
  flex: 1;
  border: none;
  border-radius: 0;
  background: transparent;
  min-width: 0;
}

.form__textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}

/* Alter Input (Funnel Step 3) */
.funnel-age-input {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  padding-top: 8px;
}

.form__input--age {
  width: 100%;
  text-align: center;
  -moz-appearance: textfield;
}

.form__input--age::-webkit-outer-spin-button,
.form__input--age::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn--age-next {
  width: 100%;
}

/* Success State */
/* Shared CTA spacing */
.section__cta,
.unternehmen__cta {
  text-align: center;
  margin-top: 3rem;
}

/* ============================================
   FAQ (Häufige Fragen)
   ============================================ */
.faq-section {
  padding: 80px 0 60px;
  position: relative;
}

.faq-section::before,
.faq-section::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.55) 30%, rgba(201, 168, 76, 0.55) 70%, transparent);
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.35), 0 0 28px rgba(201, 168, 76, 0.15);
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.faq-section::before { top: 0; }
.faq-section::after  { bottom: 0; }

.faq-section.section-divider-visible::before,
.faq-section.section-divider-visible::after {
  opacity: 1;
}

.faq-list {
  max-width: 720px;
  margin: 40px auto 0;
}

.faq-item {
  border-top: 1px solid rgba(201, 168, 76, 0.18);
  transition: background 0.3s ease;
}

.faq-item:last-child {
  border-bottom: 1px solid rgba(201, 168, 76, 0.18);
}

.faq-item.is-open {
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.03), transparent);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--white);
  transition: color 0.2s ease;
  min-height: 64px;
}

.faq-question:hover {
  color: var(--gold);
}

.faq-item.is-open .faq-question {
  color: var(--gold);
}

.faq-question > span:first-child {
  flex: 1;
  line-height: 1.4;
}

.faq-icon {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--gold);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.is-open .faq-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-item.is-open .faq-answer {
  max-height: 500px;
}

.faq-answer__inner {
  padding: 0 8px 24px;
}

.faq-answer__inner p {
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 0;
}

@media (max-width: 640px) {
  .faq-section {
    padding: 60px 0 40px;
  }
  .faq-question {
    font-size: 1rem;
    padding: 20px 4px;
  }
  .faq-answer__inner {
    padding: 0 4px 20px;
  }
  .faq-answer__inner p {
    font-size: 0.95rem;
  }
}

/* ============================================
   STATEMENT (Abschluss-Block)
   ============================================ */
.statement-section {
  padding: 50px 0 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(201, 168, 76, 0.14) 0%, rgba(201, 168, 76, 0.04) 45%, transparent 65%),
    var(--black);
}

/* Animated gold glow orbs — multiple small elements like camouflage */
.statement__glow {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* Orb 1 — oben links, flache Wolke */
.statement__glow--1 {
  width: 180px;
  height: 100px;
  top: 8%;
  left: 2%;
  border-radius: 60% 40% 50% 45% / 50% 35% 60% 45%;
  background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.16) 0%, rgba(201, 168, 76, 0.04) 50%, transparent 70%);
  filter: blur(20px);
  animation: glowFloat1 7s ease-in-out infinite;
}

/* Orb 2 — rechts mitte, schmal */
.statement__glow--2 {
  width: 120px;
  height: 140px;
  top: 50%;
  right: 3%;
  border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%;
  background: radial-gradient(ellipse at center, rgba(230, 210, 140, 0.14) 0%, rgba(230, 210, 140, 0.03) 55%, transparent 75%);
  filter: blur(18px);
  animation: glowFloat2 9s ease-in-out infinite;
}

/* Orb 3 — center, breit, subtil */
.statement__glow--3 {
  width: 220px;
  height: 110px;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50% 40% 55% 45% / 40% 55% 35% 50%;
  background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.12) 0%, rgba(201, 168, 76, 0.03) 50%, transparent 70%);
  filter: blur(24px);
  animation: glowFloat3 6s ease-in-out infinite;
}

/* Orb 4 — unten links, organisch */
.statement__glow--4 {
  width: 130px;
  height: 80px;
  bottom: 12%;
  left: 12%;
  border-radius: 40% 60% 45% 55% / 55% 40% 60% 45%;
  background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.18) 0%, rgba(201, 168, 76, 0.04) 50%, transparent 70%);
  filter: blur(16px);
  animation: glowFloat4 8s ease-in-out infinite;
}

/* Orb 5 — oben rechts, tropfenförmig */
.statement__glow--5 {
  width: 90px;
  height: 110px;
  top: 3%;
  right: 15%;
  border-radius: 55% 45% 50% 50% / 45% 60% 40% 55%;
  background: radial-gradient(ellipse at center, rgba(230, 210, 140, 0.13) 0%, rgba(201, 168, 76, 0.03) 55%, transparent 70%);
  filter: blur(14px);
  animation: glowFloat5 10s ease-in-out infinite;
}

/* Orb 6 — unten rechts, flach breit */
.statement__glow--6 {
  width: 170px;
  height: 80px;
  bottom: 3%;
  right: 20%;
  border-radius: 45% 55% 50% 45% / 50% 40% 55% 50%;
  background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.12) 0%, rgba(201, 168, 76, 0.03) 50%, transparent 70%);
  filter: blur(18px);
  animation: glowFloat6 7.5s ease-in-out infinite;
}

@keyframes glowFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  33%      { transform: translate(30px, -20px) scale(1.15); opacity: 0.8; }
  66%      { transform: translate(-15px, 15px) scale(0.9); opacity: 0.4; }
}

@keyframes glowFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.45; }
  40%      { transform: translate(-25px, 20px) scale(1.1); opacity: 0.75; }
  70%      { transform: translate(15px, -10px) scale(0.85); opacity: 0.35; }
}

@keyframes glowFloat3 {
  0%, 100% { transform: translateX(-50%) translate(0, 0) scale(1); opacity: 0.4; }
  30%      { transform: translateX(-50%) translate(20px, 15px) scale(1.2); opacity: 0.7; }
  60%      { transform: translateX(-50%) translate(-25px, -10px) scale(0.85); opacity: 0.3; }
}

@keyframes glowFloat4 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.45; }
  50%      { transform: translate(20px, -25px) scale(1.2); opacity: 0.8; }
}

@keyframes glowFloat5 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  25%      { transform: translate(-20px, 15px) scale(1.05); opacity: 0.7; }
  50%      { transform: translate(10px, 25px) scale(0.9); opacity: 0.45; }
  75%      { transform: translate(15px, -10px) scale(1.1); opacity: 0.75; }
}

@keyframes glowFloat6 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.35; }
  35%      { transform: translate(-18px, -20px) scale(1.1); opacity: 0.7; }
  65%      { transform: translate(22px, 12px) scale(0.85); opacity: 0.4; }
}

.statement__inner {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.statement__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--white);
  margin-bottom: 20px;
}

.statement__title em {
  font-style: italic;
  color: var(--gold);
}

.statement__text {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-dim);
  margin-bottom: 40px;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201, 168, 76, 0.08) 0%, transparent 55%),
    var(--black);
  padding: 56px 0 0;
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  left: 8%; right: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.45) 30%, rgba(201, 168, 76, 0.45) 70%, transparent);
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.3), 0 0 24px rgba(201, 168, 76, 0.12);
  opacity: 0;
  transition: opacity 1.2s ease;
}

.footer.section-divider-visible::before {
  opacity: 1;
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
  gap: 24px;
  flex-wrap: wrap;
}

.footer__logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  margin-bottom: 10px;
}

.footer__tagline {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  flex-wrap: wrap;
  gap: 12px;
}

.footer__bottom p {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.footer__legal {
  display: flex;
  gap: 24px;
}

.footer__legal-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8rem;
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--transition);
  font-family: var(--font-body);
}

.footer__legal-btn:hover { color: var(--gold); }

.footer__logo-row {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
}

/* --- Legal Modals --- */
.legal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9997;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.legal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.legal-modal {
  background: #0a0a0a;
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: var(--radius-lg);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 40px;
  position: relative;
}

.legal-modal__close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  transition: color var(--transition);
}

.legal-modal__close:hover { color: var(--gold); }

.legal-modal__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--white);
  margin-bottom: 24px;
}

.legal-modal__body h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 20px 0 8px;
}

.legal-modal__body p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 8px;
}

.legal-modal__body a {
  color: var(--gold);
  text-decoration: none;
}

.legal-modal__body a:hover {
  text-decoration: underline;
}

/* Logo Transition Overlay */
.logo-transition {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--black);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.3s ease, background 0.5s ease;
}

.logo-transition.active {
  opacity: 1;
  pointer-events: all;
}

.logo-transition__img {
  width: 100vmax;
  transform: scale(0.09);
  transition: transform 1.5s cubic-bezier(0.15, 0, 0.05, 1);
  image-rendering: high-quality;
}

.logo-transition.active:not(.expand) .logo-transition__img {
  animation: logo-glow 1s ease-in-out infinite alternate;
}

@keyframes logo-glow {
  from { filter: drop-shadow(0 0 20px rgba(201, 168, 76, 0.4)); }
  to   { filter: drop-shadow(0 0 60px rgba(201, 168, 76, 1)) brightness(1.15); }
}

.logo-transition.expand .logo-transition__img {
  transform: scale(1.1);
  animation: none;
  filter: drop-shadow(0 0 80px rgba(201, 168, 76, 0.8));
}

.logo-transition.gold {
  background: var(--gold);
}

.logo-transition.fade-out {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* --- Cookie Modal --- */
.cookie-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.cookie-overlay.visible {
  opacity: 1;
  pointer-events: all;
}
.cookie-modal {
  background: rgba(10, 10, 10, 0.85);
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 480px;
  width: 100%;
  text-align: center;
}
.cookie-modal__icon {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
}
.cookie-modal__logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
}
.cookie-modal__title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--white);
  margin-bottom: 14px;
  font-style: italic;
}
.cookie-modal__text {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 28px;
}
.cookie-modal__btn {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--black);
  border: none;
  padding: 14px 40px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
}
.cookie-modal__btn:hover {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  transform: translateY(-2px);
  box-shadow: 0 0 36px rgba(201, 168, 76, 0.55);
}

/* ============================================
   HIGH-END ANIMATIONS
   ============================================ */

/* --- Scroll Progress Bar --- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.6), 0 0 20px rgba(201, 168, 76, 0.3);
  z-index: 10000;
  transition: none;
  pointer-events: none;
}

/* --- Letter Assemble --- */
@keyframes letterFlyIn {
  0% {
    opacity: 0;
    transform: translate(var(--la-x), var(--la-y)) scale(0.5) rotate(var(--la-r));
    filter: blur(4px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
    filter: blur(0);
  }
}

/* --- Gold Particle Burst --- */

/* --- Ambient Sparks --- */



/* --- Counting Numbers --- */
.unternehmen__stat-num[data-count] {
  font-variant-numeric: tabular-nums;
}

/* ============================================
   RESPONSIVE — TABLET (900px)
   ============================================ */
@media (max-width: 900px) {
  :root {
    --section-pad: 64px;
  }

  .team-card {
    flex: 0 1 calc(33.333% - 14px);
  }

  .events__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }

  .rolle__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }

  .rolle__req-list {
    grid-template-columns: 1fr;
  }

  .testimonials__grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* ============================================
   RESPONSIVE — MOBILE (480px)
   ============================================ */
@media (max-width: 480px) {
  :root {
    --section-pad: 48px;
  }

  .hero {
    padding: 48px 0 40px;
  }

  .hero__headline {
    font-size: clamp(2.2rem, 7.5vw, 3.6rem);
  }

  .btn--large {
    padding: 16px 28px;
    font-size: 0.9rem;
    width: 100%;
    max-width: 380px;
  }

  .team__grid {
    gap: 12px;
  }

  .team-card {
    flex: 0 1 calc(50% - 6px);
  }

  .rolle__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }

  .rolle-card {
    padding: 26px 22px 24px;
  }

  .rolle__requirements {
    padding: 28px 20px;
    margin-top: 40px;
  }

  .testimonials__grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }

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

  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* --- Funnel Mobile --- */
  .funnel-step__title {
    font-size: clamp(1.8rem, 6vw, 2.6rem);
  }

  .funnel-option {
    padding: 16px 20px;
    font-size: 0.9rem;
  }

  .funnel-close {
    top: 16px;
    right: 16px;
  }
}

/* Reduced-Motion steht gesammelt am Dateiende. */

/* ============================================
   WER DICH AUSBILDET — Stefan
   ============================================ */
.ausbildung {
  background:
    radial-gradient(ellipse 55% 40% at 5% 95%, rgba(201, 168, 76, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse 65% 55% at 95% 5%, rgba(201, 168, 76, 0.10) 0%, transparent 55%),
    var(--surface);
  position: relative;
}

.ausbildung::before,
.ausbildung::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.45) 30%, rgba(201, 168, 76, 0.45) 70%, transparent);
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.30), 0 0 28px rgba(201, 168, 76, 0.12);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.ausbildung::before { top: 0; }
.ausbildung::after  { bottom: 0; }

.ausbildung.section-divider-visible::before,
.ausbildung.section-divider-visible::after {
  opacity: 1;
}

.ausbildung__inner {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}

.ausbildung__photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(201, 168, 76, 0.20);
  aspect-ratio: 1 / 1;
}

.ausbildung__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(15%) brightness(0.9);
  transition: filter 0.5s ease;
}

.ausbildung__photo:hover img { filter: grayscale(0%) brightness(1); }

.ausbildung__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--white);
}

.ausbildung__name em { font-style: italic; color: var(--gold); }

.ausbildung__role {
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.ausbildung__text {
  margin-top: 18px;
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-muted);
}

.ausbildung__stats { margin-top: 32px; }

@media (max-width: 900px) {
  .ausbildung__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    max-width: 520px;
  }
  .ausbildung__photo { max-width: 320px; margin: 0 auto; }
  .ausbildung__body { text-align: center; }
}


/* --- Fraunces: Feineinstellung ---------------------------------
   Die opsz-Achse (9-144) veraendert die Buchstabenformen je nach
   Groesse. Der Browser regelt sie ueber font-optical-sizing: auto
   von selbst — nie auf none setzen, sonst wirken grosse Headlines
   flach. Durchgehend -0.02em Sperrung auf allem in Fraunces. */
.hero__headline,
.section__title,
.statement__title,
.unternehmen__stat-num,
.team-card__initial,
.rolle-card__title,
.rolle__req-title,
.event-card__title,
.funnel-step__title,
.ausbildung__name,
.legal-modal__title,
.cookie-modal__title,
.footer__tagline {
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
}

/* --- Trennlinien: keine Doppellinien --------------------------
   Jede Sektion bringt eine Linie oben und eine unten mit. Stossen
   zwei Sektionen aufeinander, stehen dort zwei 1px-Linien mit 2px
   Abstand — das sieht nach Fehler aus. Die nachfolgende Sektion
   verliert deshalb ihre obere Linie; sichtbar bleibt die untere
   der vorhergehenden.

   Der Hero ist bewusst ausgenommen (er traegt keine .section),
   damit die erste Sektion ihre obere Linie behaelt.
   Diese Regel bei jeder Umstellung der Reihenfolge mitdenken. */
.section + .section::before { display: none; }

/* Beim Footer steht das Funnel-Overlay als Geschwister dazwischen, der
   Nachbar-Selektor greift dort also nicht — deshalb das allgemeine ~. */
.section ~ .footer::before { display: none; }

/* Zwei Kennzahlen statt vier: sie sollen die Flaeche fuellen, nicht
   in einem Vierer-Raster verloren stehen. */
.ausbildung__stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 460px;
}

.ausbildung__body .unternehmen__stat-num {
  font-size: 1.7rem;
  /* "5-stellig" darf umbrechen, wenn es sonst die Kachel sprengt */
  white-space: normal;
}

@media (max-width: 900px) {
  .ausbildung__stats { margin-left: auto; margin-right: auto; }
}

@media (max-width: 380px) {
  .ausbildung__body .unternehmen__stat-num { font-size: 1.4rem; }
}

/* --- Hero-Headline auf sehr schmalen Geraeten -----------------
   "Vertriebsmitarbeiter" ist EIN Wort. Die Letter-Assemble-Animation
   verpackt jedes Wort in .la-word mit white-space: nowrap — dort kann
   weder hyphens noch overflow-wrap greifen, sonst wuerden die einzeln
   animierten Buchstaben mitten im Wort umbrechen.

   Deshalb hier der einzige verbleibende Hebel: die Schriftgroesse.
   Ohne diese Regel ragte der Text auf 320px 47px aus seinem Element
   und wurde von .hero { overflow: hidden } abgeschnitten — der
   Ueberstand war unsichtbar, das angeschnittene Wort aber nicht. */
@media (max-width: 380px) {
  .hero__headline {
    font-size: clamp(1.7rem, 8.4vw, 2.2rem);
  }
}


/* ============================================================
   BEWEGUNG — Register A (Ultra-Premium)
   Bewegung reagiert auf den Nutzer: Laden, Scrollen, Hover.
   Nichts laeuft autonom, um Aufmerksamkeit zu erbitten.
   Eigene Kurve statt Standard-ease, GPU-Eigenschaften only.
   ============================================================ */

:root {
  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- 1) HERO-ENTRANCE: gestaffelt beim Laden ---------------- */
.enter {
  animation: enter 0.9s var(--ease-entrance) both;
  animation-delay: var(--d, 0s);
}
.enter--blur { animation-name: enterBlur; }
.enter--line { display: block; }

@keyframes enter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes enterBlur {
  from { opacity: 0; transform: translateY(24px); filter: blur(12px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* --- 2) SCROLL-REVEALS mit Geschwister-Stagger -------------- */
/* Der Startzustand haengt an .js: ohne JavaScript ist alles sofort da. */
.js .fade-in {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(6px);
  transition: opacity 0.7s var(--ease-entrance),
              transform 0.7s var(--ease-entrance),
              filter 0.7s var(--ease-entrance);
}
.fade-in.is-visible { opacity: 1; transform: none; filter: blur(0); }

/* Fliesstext bekommt kein Blur — das stoert beim Lesen */
.js .fade-in--text { filter: none; }
.fade-in--text.is-visible { filter: none; }

/* --- 4) CTA-LICHT-SWEEP: nur bei Hover ---------------------- */
/* Register A: kein Auto-Sweep. Ein Knopf, der von allein blinkt,
   bittet um Aufmerksamkeit — das kostet bei dieser Zielgruppe Status. */
.btn--gold { position: relative; overflow: hidden; isolation: isolate; }

.btn--gold::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}

@media (hover: hover) {
  .btn--gold:hover::after { animation: sheen 0.85s ease; }
}

@keyframes sheen {
  0%   { left: -60%; }
  16%  { left: 145%; }
  100% { left: 145%; }
}

/* --- 5) SCROLL-GEKOPPELTE PROGRESS-LINIE (Stufen-Sektion) --- */
.stufen-schiene {
  display: none;   /* nur Desktop, siehe Media Query */
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(201, 168, 76, 0.14);
  pointer-events: none;
}

.stufen-schiene__fuellung {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0;
  background: linear-gradient(to bottom, rgba(201, 168, 76, 0.65), var(--gold));
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.5);
  will-change: height;
}

@media (min-width: 1040px) {
  .stufen-schiene { display: block; }
  .rolle-section { position: relative; }
}

/* Karte leuchtet auf, wenn die Linie sie erreicht */
.rolle-card {
  transition: border-color 0.45s ease, transform 0.3s ease, box-shadow 0.45s ease;
}
.rolle-card.is-lit {
  border-color: rgba(201, 168, 76, 0.5);
  box-shadow: 0 0 30px rgba(201, 168, 76, 0.10);
}
.rolle-card__stage { transition: text-shadow 0.45s ease, color 0.45s ease; }
.rolle-card.is-lit .rolle-card__stage { text-shadow: 0 0 14px rgba(201, 168, 76, 0.55); }

/* --- 6) STICKY-PORTRAIT (Stefan) ---------------------------- */
@media (min-width: 901px) {
  .ausbildung__inner { align-items: start; }
  .ausbildung__photo {
    position: sticky;
    /* 160px = halbe Bildhoehe bei 320px Spaltenbreite */
    top: calc(50vh - 160px);
  }
}

/* --- 8) HOVER-MIKROINTERAKTIONEN --------------------------- */
/* Nur bei echtem Zeigergeraet: auf Touch bleibt ein :hover sonst kleben. */
@media (hover: hover) {
  .team-card,
  .event-card,
  .rolle-card,
  .testi-card {
    transition: transform 0.3s var(--ease-entrance), border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .team-card:hover,
  .event-card:hover,
  .rolle-card:hover,
  .testi-card:hover {
    transform: translateY(-2px);
    border-color: rgba(201, 168, 76, 0.55);
  }
  .btn--gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 36px rgba(201, 168, 76, 0.45), 0 10px 34px rgba(0, 0, 0, 0.45);
  }
  .funnel-option:hover { transform: translateY(-2px); }
}

/* --- 9) STICKY MOBILE-CTA ---------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9990;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(14, 12, 10, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  transform: translateY(130%);
  transition: transform 0.35s var(--ease-entrance);
}

.sticky-cta.is-visible { transform: translateY(0); }

.sticky-cta__label {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--text-muted);
}
.sticky-cta__label strong { display: block; color: var(--text); font-weight: 600; }
.sticky-cta .btn { flex-shrink: 0; }

@media (max-width: 880px) {
  .sticky-cta { display: flex; }
}

/* --- 10) HERO-AURA: sehr langsame Drift --------------------- */
/* Die einzige autonome Bewegung ausser dem Matrix-Regen — beides
   traegt die Matrix-Bildwelt der Marke, nicht die Konversion. */
.hero__aura {
  position: absolute;
  inset: -10% -20% auto -20%;
  height: 70%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 45% 60% at 30% 30%, rgba(201, 168, 76, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 55% at 72% 45%, rgba(201, 168, 76, 0.08) 0%, transparent 62%);
  animation: auraDrift 22s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes auraDrift {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}

/* ============================================================
   REDUCED MOTION — alles sofort sichtbar, nichts bewegt sich.
   Jeder neue Effekt gehoert hier eingetragen.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .scroll-progress { display: none; }

  /* Entrances: Endzustand ohne Animation, keine Blur-Reste */
  .enter,
  .enter--blur {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .js .fade-in,
  .fade-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  /* Progress-Linie steht voll, alle Stufen leuchten */
  .stufen-schiene__fuellung { height: 100% !important; }
  .rolle-card { border-color: rgba(201, 168, 76, 0.5); }

  /* Hover-Hub und Sweep aus */
  .btn--gold::after { display: none; }
  .btn--gold:hover,
  .team-card:hover,
  .event-card:hover,
  .rolle-card:hover,
  .testi-card:hover,
  .funnel-option:hover { transform: none; }

  /* Ambiente steht still, bleibt aber sichtbar */
  .hero__aura { animation: none; }
  .hero__matrix { display: none; }

  .sticky-cta { transition: none; }

  /* Sticky-Portrait bleibt, es ist Layout und keine Bewegung */
  .funnel-step,
  .funnel-overlay,
  .legal-overlay { transition: none !important; }
}