/* funke.css — „Der Funke" (#spark), Engine: funke.js
   Live (JS + Bewegung): gepinnte Bühne, Reiter folgen dem Scrollen.
   Ohne JS / reduzierte Bewegung: ruhige Liste der Angebote. */
.funke {
  --f-blue: #2ea2ff;
  --f-deep: #1f6dff;
  --f-lede: #b9c6d8;
  --f-muted: #7f8ea3;
  --f-line: rgba(255, 255, 255, .1);
  --funke-lit: 0;     /* 0..1, funke.js: Symbol leuchtet */
  --funke-out: 0;     /* 0..1, funke.js (Desktop): Text weicht der Kuppel */
  position: relative;
  background: #02030a;
  color: #fff;
}
.funke-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 6; }

.funke__sticky {
  position: relative;
  background:
    linear-gradient(180deg, #02030a 0%, rgba(2,3,10,0) 13%, rgba(2,3,10,0) 87%, #02030a 100%),
    radial-gradient(120% 92% at 30% 52%, #060b16 0%, #02030a 62%);
}
.funke__flood {
  position: absolute; left: -6%; top: 50%; width: 62%; height: 120%;
  transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(46,162,255,.26), rgba(46,162,255,.06) 55%, transparent 76%);
  opacity: calc(var(--funke-lit) * .9);
  filter: blur(6px);
  pointer-events: none;
}
.funke__grid {
  position: relative; z-index: 1;
  max-width: 1680px; margin: 0 auto;
  padding: 0 clamp(22px, 6vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);   /* Bühne links (der Ball kommt von links), Text rechts */
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
}
.funke__stage { grid-column: 1; grid-row: 1; }
.funke__copy { position: relative; grid-column: 2; grid-row: 1; }
.funke__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 11px/1 "Outfit", system-ui, sans-serif;
  letter-spacing: .3em; text-transform: uppercase; color: var(--f-blue);
}
.funke__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--f-blue); box-shadow: 0 0 12px var(--f-blue); }

/* ---- Reiter: Nummer + Name + Fortschritt je Kapitel ---- */
.funke__tabs { display: flex; gap: clamp(18px, 2.4vw, 36px); margin: clamp(12px, 2.4vh, 22px) 0 clamp(16px, 4.4vh, 48px); }
.funke__tab {
  appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0;
  position: relative; display: inline-flex; align-items: baseline; gap: 9px;
  padding: 0 0 13px; cursor: pointer; text-align: left; white-space: nowrap;
  color: rgba(255,255,255,.42);
  font: 400 clamp(20px, 1.75vw, 28px)/1 "Bebas Neue", sans-serif; letter-spacing: .035em;
  transition: color .35s ease;
}
.funke__tab:hover { color: rgba(255,255,255,.8); }
.funke__tab.is-on { color: #fff; }
.funke__tab:focus-visible { outline: 2px solid var(--f-blue); outline-offset: 6px; border-radius: 4px; }
.funke__tab-n { font: 700 10px/1 "Sora", system-ui, sans-serif; letter-spacing: .14em; color: inherit; opacity: .8; transition: color .35s ease; }
.funke__tab.is-on .funke__tab-n { color: var(--f-blue); opacity: 1; }
.funke__tab-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--f-line); overflow: hidden; }
.funke__tab-bar i {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--f-deep), #7fd0ff);
  transform-origin: left; transform: scaleX(var(--fill, 0));
  box-shadow: 0 0 12px var(--f-blue);
}
.funke__tab .sm { display: none; }

/* ---- Panels (liegen übereinander, eins ist sichtbar) ---- */
.funke__title {
  margin: 0;
  font: 400 clamp(44px, min(6.2vw, 10.5vh), 108px)/.9 "Bebas Neue", sans-serif;
  letter-spacing: .01em; text-transform: uppercase; color: #fff;
}
.funke__title em { font-style: normal; color: var(--f-blue); text-shadow: 0 0 36px rgba(46,162,255,.45); }
.funke__intro .funke__title { font-size: clamp(52px, min(7.2vw, 12.5vh), 124px); max-width: 11ch; }
.funke__lede { margin: clamp(12px, 2.4vh, 20px) 0 0; max-width: 44ch; color: var(--f-lede); font: 500 clamp(15px, min(1.3vw, 2.5vh), 20px)/1.55 "Outfit", system-ui, sans-serif; }
.funke__steps {
  list-style: none; counter-reset: fs;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  margin: 28px 0 0; padding: 0; max-width: 620px;
}
.funke__steps li { counter-increment: fs; padding-top: 14px; border-top: 1px solid var(--f-line); }
.funke__steps b { display: block; font: 700 11px/1 "Sora", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.funke__steps b::before { content: counter(fs, decimal-leading-zero) "\00a0\00a0"; color: var(--f-blue); }
.funke__steps span { display: block; margin-top: 9px; font: 500 14px/1.45 "Outfit", system-ui, sans-serif; color: var(--f-muted); }
/* ---- Angebote je Kapitel: jede Zeile verlinkt ihre Detailseite ---- */
.funke__offers { list-style: none; margin: clamp(14px, 3.4vh, 34px) 0 0; padding: 0; max-width: 560px; border-top: 1px solid var(--f-line); }
.funke__offers li { border-bottom: 1px solid var(--f-line); }
.funke__offer {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; align-items: center;
  padding: clamp(9px, 1.9vh, 15px) 4px clamp(9px, 1.9vh, 15px) 0; color: #fff; text-decoration: none;
  transition: padding .35s cubic-bezier(.2,.7,.2,1);
}
.funke__offer b { grid-column: 1; font: 400 clamp(22px, 1.7vw, 28px)/1 "Bebas Neue", sans-serif; letter-spacing: .035em; transition: color .3s ease; }
.funke__offer span { grid-column: 1; margin-top: 6px; color: var(--f-muted); font: 500 14px/1.45 "Outfit", system-ui, sans-serif; transition: color .3s ease; }
.funke__offer svg { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--f-blue); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.funke__offer:hover { padding-left: 8px; }
.funke__offer:hover b { color: var(--f-blue); }
.funke__offer:hover span { color: var(--f-lede); }
.funke__offer:hover svg { transform: translateX(4px); }
.funke__offer:focus-visible { outline: 2px solid var(--f-blue); outline-offset: 2px; border-radius: 4px; }
.funke__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: clamp(14px, 3.2vh, 30px); }
.funke__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 24px; border-radius: 999px;
  background: var(--f-deep); color: #fff; text-decoration: none;
  font: 600 13px/1 "Outfit", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(31,109,255,.28);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, background .3s ease;
}
.funke__cta:hover { background: #2f7dff; box-shadow: 0 14px 38px rgba(46,162,255,.42); transform: translateY(-2px); }
.funke__cta svg, .funke__ghost svg { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.funke__cta:hover svg, .funke__ghost:hover svg { transform: translateX(4px); }
.funke__cta:focus-visible, .funke__ghost:focus-visible { outline: 2px solid var(--f-blue); outline-offset: 3px; }
/* Ghost-Button im Hero-Beam-Look (nutzt @property --hpc-beam + hpc-beam-rot aus index.html) */
.funke__ghost {
  position: relative; display: inline-block; isolation: isolate;
  padding: 1.6px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 10px 30px rgba(31,109,255,.16);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, filter .3s ease;
}
.funke__ghost::after, .funke__ghost::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; padding: 1.6px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.funke__ghost::after { z-index: 1; background: linear-gradient(100deg, #2ea2ff 0%, #4bc8ff 46%, #3ee6c0 100%); }
.funke__ghost::before {
  z-index: 2;
  background: conic-gradient(from var(--hpc-beam),
    rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 250deg,
    rgba(214,244,255,.9) 315deg, #fff 336deg, rgba(214,244,255,.9) 352deg, rgba(255,255,255,0) 360deg);
  animation: hpc-beam-rot 3.6s linear infinite;
}
.funke__ghost-in {
  position: relative; z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13.5px 22px; border-radius: 999px;
  background: rgba(8, 13, 24, .82); color: #dcecff;
  font: 600 13px/1 "Outfit", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase;
}
.funke__ghost:hover { filter: brightness(1.1); box-shadow: 0 14px 38px rgba(46,162,255,.3); transform: translateY(-2px); }
.funke__stage { position: relative; }
.funke__still { display: none; }

/* ================= Live (funke.js aktiv) ================= */
.funke.is-live { height: 500vh; }
.funke.is-live .funke__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.funke.is-live .funke__grid { height: 100%; box-sizing: border-box; padding-top: 72px; }   /* Platz für die fixe Navigation: Text rutscht nie darunter */
.funke.is-live .funke__copy {
  opacity: calc(1 - var(--funke-out));
  transform: translateY(calc(var(--funke-out) * -28px));
}
.funke.is-live.is-out .funke__copy { pointer-events: none; }
.funke.is-live .funke__stage { height: min(78vh, 780px); margin-left: clamp(0px, 4vw, 72px); }   /* etwas nach rechts: mehr Raum für den Wurf von links */
.funke.is-live .funke__panels { display: grid; }
.funke.is-live .funke__panel {
  grid-area: 1 / 1;
  visibility: hidden;
  transition: visibility 0s linear .5s;
}
.funke.is-live .funke__panel > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity .35s ease, transform .5s ease;
}
.funke.is-live .funke__panel.is-on { visibility: visible; transition: visibility 0s; }
.funke.is-live .funke__panel.is-on > * {
  opacity: 1; transform: none;
  transition: opacity .6s ease .18s, transform .8s cubic-bezier(.2,.7,.2,1) .18s;
}
.funke.is-live .funke__panel.is-on > :nth-child(2) { transition-delay: .26s; }
.funke.is-live .funke__panel.is-on > :nth-child(3) { transition-delay: .34s; }
.funke.is-live .funke__panel.is-on > :nth-child(4) { transition-delay: .42s; }

@media (min-width: 861px) and (max-height: 700px) {
  .funke.is-live .funke__panel .funke__lede { display: none; }
}

/* ---- Handy: Bühne oben (der Ball fliegt von links hinein), darunter Reiter + Text ---- */
@media (max-width: 860px) {
  .funke.is-live { height: 400vh; }
  .funke.is-live .funke__grid {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: minmax(0, 1fr) auto auto;
    align-items: stretch; gap: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 64px) 20px calc(env(safe-area-inset-bottom, 0px) + 24px);
  }
  .funke.is-live .funke__copy { display: contents; }
  .funke.is-live .funke__eyebrow { display: none; }
  .funke.is-live .funke__stage { grid-column: 1; grid-row: 1; height: auto; min-height: 0; margin: 0 0 26px; }
  .funke.is-live .funke__tabs { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; }
  .funke.is-live .funke__panels { grid-column: 1; grid-row: 3; }
  .funke__tab { justify-content: center; padding-bottom: 11px; font-size: 17px; letter-spacing: .03em; }
  .funke__tab-n { display: none; }
  .funke__tab .lg { display: none; }
  .funke__tab .sm { display: inline; }
  .funke__title { font-size: clamp(38px, 10.5vw, 56px); }
  .funke__intro .funke__title { font-size: clamp(44px, 12.5vw, 64px); }
  .funke__lede { margin-top: 12px; font-size: 15px; line-height: 1.5; }
  .funke__steps { display: none; }
  .funke.is-live .funke__panel .funke__title { font-size: clamp(30px, 8.6vw, 44px); }
  .funke.is-live .funke__panel .funke__lede { display: none; }
  .funke.is-live .funke__panel .funke__ctas { display: none; }
  .funke__offers { margin-top: 14px; max-width: none; }
  .funke__offer { padding: 10px 2px 10px 0; }
  .funke__offer b { font-size: 21px; }
  .funke__offer span { margin-top: 3px; font-size: 12.5px; line-height: 1.35; }
  .funke__offer svg { width: 18px; height: 18px; }
  .funke__ctas { margin-top: 18px; gap: 10px; }
  .funke__cta { padding: 13px 20px; font-size: 12.5px; }
  .funke__ghost-in { padding: 11.5px 18px; font-size: 12px; }
  .funke__flood { left: -25%; top: 30%; width: 150%; height: 64%; }
}
@media (max-width: 380px) {
  .funke__ghost { display: none; }   /* sehr schmale Geräte: nur der Hauptbutton */
}

/* ================= Ohne Engine: ruhige Liste ================= */
.funke:not(.is-live) .funke__sticky { padding: clamp(80px, 12vh, 140px) 0; }
.funke:not(.is-live) .funke__grid { align-items: start; max-width: 1320px; }
.funke:not(.is-live) .funke__tabs { display: none; }
.funke:not(.is-live) .funke__eyebrow { margin-bottom: 18px; }
.funke:not(.is-live) .funke__panels { display: grid; gap: clamp(52px, 8vh, 80px); }
.funke:not(.is-live) .funke__still { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; position: sticky; top: 12vh; }
.funke:not(.is-live) .funke__flood { opacity: .6; }
.funke:not(.is-live) .funke__panel:not(:last-child) .funke__ctas { display: none; }   /* Liste: Analyse-Button nur einmal am Ende */
@media (max-width: 860px) {
  .funke:not(.is-live) .funke__grid { grid-template-columns: 1fr; }
  .funke:not(.is-live) .funke__stage, .funke:not(.is-live) .funke__copy { grid-column: 1; grid-row: auto; }
  .funke:not(.is-live) .funke__stage { order: -1; }
  .funke:not(.is-live) .funke__still { position: static; max-width: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .funke__ghost::before { animation: none; }
  .funke__cta, .funke__ghost, .funke__tab { transition: none; }
}