/* spyke academy. Nav, Buttons, FAQ, Kontakt und Footer kommen aus
   landing.css, hier steht nur das Seitenspezifische: Hero mit Filmfläche,
   das Level-Karussell, die Stack-Liste und die Formatkarten. */

.ac [id] { scroll-margin-top: 120px; }

/* --- Hero --------------------------------------------------------------- */

.ac-hero {
  max-width: var(--seitenbreite); margin: 0 auto;
  padding: 88px 24px 64px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px; align-items: center;
}
.ac-hero .label-klein { margin-bottom: 20px; }
.ac-hero h1 {
  font-size: var(--fs-h1); font-weight: 500;
  letter-spacing: -0.03em; line-height: 1.05;
  margin: 0 0 22px; max-width: 980px; text-wrap: pretty;
}
.ac-hero-lead {
  font-size: var(--fs-body-l); line-height: 1.6; color: var(--text-2);
  max-width: 680px; margin: 0 0 32px;
}
.ac-hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* Filmfläche: vor dem Start eine weiße Karte mit dem gelben Startknopf,
   darunter liegt das Video. Beim ersten Abspielen blendet der Knopf weg
   und gibt das Bild frei. */
.ac-film {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #ffffff; border: 1px solid var(--n-150);
  border-radius: var(--r-block); overflow: hidden;
  box-shadow: var(--schatten-float);
}
.ac-film-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ac-film-start {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; padding: 0; cursor: pointer;
  background: #ffffff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  transition: opacity var(--dauer) var(--ease);
}
.ac-film-start:hover .ac-film-knopf { transform: scale(1.06); }
.ac-film-start:focus-visible { outline: 3px solid var(--gelb); outline-offset: -3px; }
.ac-film.laeuft .ac-film-start { opacity: 0; pointer-events: none; }
.ac-film-knopf {
  width: 76px; height: 76px; border-radius: 50%; background: var(--gelb);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dauer) var(--ease);
}
.ac-film-pfeil {
  width: 0; height: 0; margin-left: 5px;
  border-top: 12px solid transparent; border-bottom: 12px solid transparent;
  border-left: 20px solid var(--schwarz);
}
.ac-film-text {
  font-size: 12px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-2);
}

.ac-trenner {
  max-width: var(--seitenbreite); margin: 0 auto;
  padding: 24px 24px 56px;
}
.ac-trenner::after { content: ""; display: block; height: 1px; background: var(--n-150); }

/* --- Level-Karussell ---------------------------------------------------- */

.ac-level { max-width: var(--seitenbreite); margin: 0 auto; padding: 24px 24px 72px; }
.ac-level .label-klein { margin-bottom: 16px; }
.ac-level > h2 {
  font-size: var(--fs-h2); font-weight: 500;
  letter-spacing: -0.025em; line-height: 1.1;
  margin: 0 0 16px; max-width: 820px; text-wrap: pretty;
}
.ac-level-lead {
  font-size: 15px; line-height: 1.65; color: var(--text-2);
  max-width: 640px; margin: 0 0 40px;
}

.ac-lvtabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.ac-lvtab {
  font-family: inherit; font-size: 14px; font-weight: 500;
  padding: 11px 20px; border-radius: var(--r-pill);
  border: 1px solid var(--n-150); background: transparent;
  color: var(--n-600); cursor: pointer;
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.ac-lvtab:hover { color: var(--schwarz); }
.ac-lvtab[aria-selected="true"] {
  background: var(--schwarz); border-color: var(--schwarz); color: var(--offwhite);
}

.ac-lvfenster {
  background: #ffffff; border: 1px solid var(--n-150);
  border-radius: var(--r-card); overflow: hidden;
  cursor: grab; touch-action: pan-y; user-select: none;
}
.ac-lvfenster.zieht { cursor: grabbing; }
.ac-lvspur { display: flex; width: 100%; transition: transform var(--wipe); }
.ac-lvfenster.zieht .ac-lvspur { transition: none; }
/* flex-basis statt min-width: Letzteres bezieht sich auf die Breite der
   Spur, die sich wiederum aus dem Inhalt ergaebe - die Folien waeren
   dann null breit und die Canvas-Flaechen blieben leer. */
.ac-lvslide {
  flex: 0 0 100%; min-width: 0; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
.ac-lvbild { position: relative; min-height: 320px; background: var(--schwarz); overflow: hidden; }
.ac-lvbild canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ac-lvtext {
  padding: 48px; display: flex; flex-direction: column;
  justify-content: center; gap: 14px;
}
.ac-lvkopf { display: flex; align-items: center; gap: 12px; margin: 0; }
.ac-lvnr {
  width: 32px; height: 32px; border-radius: 50%; background: var(--gelb);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; flex: none;
}
.ac-lvtext h3 { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.ac-lvbeschreibung {
  font-size: 14.5px; line-height: 1.65; color: var(--text-2);
  max-width: 640px; margin: 0;
}
.ac-lvfuer { font-size: 12.5px; font-weight: 500; color: var(--n-600); margin: 0; }

.ac-lvdots { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }

/* --- Stacks ------------------------------------------------------------- */

.ac-stacks { background: var(--n-100); padding: 72px 0; }
.ac-stacks .label-klein { margin-bottom: 16px; }
.ac-stacks h2 {
  font-size: var(--fs-h2); font-weight: 500;
  letter-spacing: -0.025em; line-height: 1.1;
  margin: 0 0 40px; max-width: 820px; text-wrap: pretty;
}
.ac-stkgrid { display: grid; grid-template-columns: 30% 1fr; gap: 48px; align-items: start; }

.ac-stknav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 4px; }
/* Nur direkte Kinder: Ein Knopf im Container soll die Polsterung der
   Navigationslinks nicht erben und dadurch flacher werden. */
.ac-stknav > a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  color: var(--n-600); background: transparent;
  transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.ac-stknav > a:not(.aktiv):hover,
.ac-stknav > a:not(.aktiv):focus-visible {
  color: var(--schwarz); background: rgba(255, 255, 255, 0.65);
}
.ac-stknav > a.aktiv {
  color: var(--schwarz); background: #ffffff;
  box-shadow: 0 8px 24px rgba(11, 11, 11, 0.07);
}
.ac-stkpunkt {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--n-300);
  transition: background 0.3s ease, transform 0.3s ease;
}
.ac-stknav > a.aktiv .ac-stkpunkt { background: var(--gelb); transform: scale(1.15); }

.ac-stkliste { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ac-stk {
  background: #ffffff; border-radius: var(--r-card); padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.ac-stk h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.ac-stk p { font-size: 14px; line-height: 1.65; color: var(--text-2); max-width: 560px; margin: 0; }
.ac-stkbadge {
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; background: var(--gelb);
  padding: 6px 14px; border-radius: var(--r-pill);
  vertical-align: middle; margin-left: 12px;
}

/* Logos mit Namensschild beim Zeigen: die Marken sind als kleine
   Signets oft nicht eindeutig zu erkennen. */
.ac-logos { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; row-gap: 14px; align-items: center; flex-wrap: wrap; }
.ac-logos li { position: relative; display: inline-flex; }
.ac-logos img { width: 20px; height: 20px; object-fit: contain; display: block; }
.ac-gerundet { border-radius: 4px; }
.ac-tip {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translate(-50%, 4px);
  background: var(--schwarz); color: var(--offwhite);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em;
  padding: 6px 12px; border-radius: var(--r-pill); white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 5;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.ac-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--schwarz);
}
.ac-logos li:hover .ac-tip,
.ac-logos li:focus-within .ac-tip { opacity: 1; transform: translate(-50%, 0); }

.ac-pills { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.ac-pills li {
  font-size: 12.5px; font-weight: 500; padding: 7px 14px;
  border-radius: var(--r-pill); border: 1px solid var(--n-200);
}

/* --- Formate ------------------------------------------------------------ */

.ac-formate { max-width: var(--seitenbreite); margin: 0 auto; padding: 72px 24px; }
.ac-formate .label-klein { margin-bottom: 16px; }
.ac-formate > h2 {
  font-size: var(--fs-h2); font-weight: 500;
  letter-spacing: -0.025em; line-height: 1.1;
  margin: 0 0 16px; max-width: 820px; text-wrap: pretty;
}
.ac-formate-lead {
  font-size: 15.5px; line-height: 1.7; color: var(--text-2);
  max-width: 820px; margin: 0 0 40px;
}
.ac-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.ac-format {
  background: #ffffff; border: 1px solid var(--n-150);
  border-radius: var(--r-card); padding: 32px;
  display: flex; flex-direction: column;
  transition: transform var(--wipe), box-shadow var(--wipe);
}
.ac-format:hover { transform: translateY(-3px); box-shadow: var(--schatten-hover); }
.ac-format .label-mini { margin-bottom: 14px; }
.ac-format h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 10px; }
.ac-format-text { font-size: 13.5px; line-height: 1.6; color: var(--text-2); margin: 0 0 20px; }

.ac-zeilen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.ac-zeilen li {
  display: flex; gap: 12px;
  border: 1px solid var(--n-150); border-radius: var(--r-tile);
  padding: 14px 16px;
}
.ac-zeilen .punkt { flex: none; margin-top: 7px; }
.ac-zeile-titel { display: block; font-size: 14px; font-weight: 500; }
.ac-zeile-text { display: block; font-size: 13px; line-height: 1.55; color: var(--text-2); }

.ac-format-dunkel {
  background: var(--schwarz); border-color: var(--schwarz); color: var(--offwhite);
}
.ac-format-dunkel .label-mini { color: var(--n-500); }
.ac-format-dunkel .ac-format-text { color: var(--n-300); }
.ac-format-dunkel .ac-pills { margin-top: auto; }
.ac-format-dunkel .ac-pills li { border-color: var(--n-800); padding: 8px 16px; }

/* --- Mobil -------------------------------------------------------------- */

@media (max-width: 980px) {
  .ac-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ac-stkgrid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ac-stknav { display: none; }
  .ac-lvslide { grid-template-columns: minmax(0, 1fr); grid-template-rows: 220px auto; }
  .ac-lvbild { min-height: 0; height: 220px; }
  .ac-lvtext { padding: 32px 28px; }
  .ac-formats { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .ac-hero { padding: 64px 24px 40px; }
  .ac-stk { padding: 24px 20px; }
  .ac-format { padding: 24px 20px; }
  .ac-lvtext { padding: 24px 20px; }
}