/* Verläufe, Hintergrund und Zentrierung (21.10.2026).
   EIN durchgehender Hintergrund hinter allen Sektionen: weiche Blau-Violett-Glows, die sich über die ganze Seitenhöhe
   abwechseln und nirgends an Sektionsgrenzen enden. Die Sektionen selbst bleiben transparent. */

html body {
  background-color: var(--bg);
  background-image:
    radial-gradient(52% 700px at 6% 620px,    rgba(37,99,235,.22), transparent 72%),
    radial-gradient(48% 700px at 96% 1250px,  rgba(124,58,237,.20), transparent 72%),
    radial-gradient(44% 620px at 12% 1900px,  rgba(37,99,235,.18), transparent 72%),
    radial-gradient(46% 640px at 90% 2500px,  rgba(124,58,237,.17), transparent 72%),
    radial-gradient(34% 520px at 50% 1560px,  rgba(6,182,212,.07), transparent 72%);
  background-size: 100% 3100px;
  background-repeat: repeat-y;
}
/* Sektionen und Bänder dürfen keine eigene Fläche mehr zeichnen, sonst entstehen wieder sichtbare Kanten */
.zwei-wege, .cta-sec, #social-proof, section.sec, .st-sec, .rf-sec, .vm-sec { background: transparent !important; }

/* ---------- RIFF-Seite: gleiche Rhythmik und Zentrierung ---------- */
.rf-sec { padding: clamp(64px, 8vw, 112px) var(--pad-x) !important; }
.rf-sec > .rf-wrap > .eyebrow { display: flex; justify-content: center; }
.rf-sec > .rf-wrap > .rf-h2 { margin-left: auto; margin-right: auto; text-align: center; max-width: 22em; }
.rf-sec > .rf-wrap > .rf-p { margin-left: auto; margin-right: auto; text-align: center; max-width: 46em; }
/* Ablauf bleibt zweispaltig mit Handy: dort links lassen */
#ablauf.rf-sec > .rf-wrap > .eyebrow { justify-content: flex-start; }
#ablauf.rf-sec > .rf-wrap > .rf-h2, #ablauf.rf-sec > .rf-wrap > .rf-p { margin-left: 0; margin-right: 0; text-align: left; max-width: 19em; }
.rf-regler.rf-persons { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
.rf-cmpbar { justify-content: center; }
/* Vertrauensblock: Überschrift mittig, drei Fakten nebeneinander */
.rf-trust { grid-template-columns: 1fr !important; text-align: center; justify-items: center; }
.rf-trust .eyebrow { justify-content: center; display: flex; }
.rf-trust .rf-facts { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px 36px; text-align: left; max-width: 62em; }
@media (max-width: 820px) { .rf-trust .rf-facts { grid-auto-flow: row; } }
.rf-end { text-align: center; }
.rf-end .hero-actions { justify-content: center; }
.rf-faq { max-width: 56em; margin-left: auto; margin-right: auto; }
.rf-trust { border-top: 0 !important; border-bottom: 0 !important; }
.rf-video { margin-left: auto !important; margin-right: auto !important; text-align: center; }
/* Hairlines weg, der Verlauf trennt die Sektionen */
.rf-spur { max-width: 50em; margin-left: auto; margin-right: auto; }
.rf-ed { max-width: 62em; margin-left: auto; margin-right: auto; }
.rf-limits { margin-left: auto; margin-right: auto; }

@media (max-width: 820px) {
  .rf-sec > .rf-wrap > .rf-h2, .rf-sec > .rf-wrap > .rf-p { max-width: none; }
  #ablauf.rf-sec > .rf-wrap > .rf-h2 { max-width: none; }
}

/* ---------- Einklappbare Abschnitte (Einführung, Mehr als ein Transkript, Wohin das führt) ---------- */
.rf-fold { max-width: 62em; margin: 8px auto 0; }
.rf-fold > summary { list-style: none; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 52px; padding: 10px 26px; margin: 0 auto; width: fit-content; border: 1px solid rgba(6,182,212,.5); background: rgba(6,182,212,.07); border-radius: 999px; color: var(--text); font-weight: 600; }
.rf-fold > summary::-webkit-details-marker { display: none; }
.rf-fold > summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--cyan); }
.rf-fold[open] > summary::after { content: "\2212"; }
.rf-fold > summary:hover { border-color: var(--cyan); }
.rf-fold > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.rf-fold-in { padding-top: 36px; }
.rf-sec:has(> .rf-wrap > .rf-fold) { padding-top: clamp(36px, 4.5vw, 56px) !important; padding-bottom: clamp(36px, 4.5vw, 56px) !important; }
.rf-sec:has(> .rf-wrap > .rf-fold) > .rf-wrap > .rf-h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: 22px; }

/* ---------- Vertrieb von morgen: schmale Sektionen, Glow über volle Breite, Überschriften mittig ---------- */
.vm-sec { padding-top: 72px !important; padding-bottom: 40px !important; }
.vm-sec > .vm-eyebrow, .vm-sec > h2, .vm-sec > .vm-sub { text-align: center; margin-left: auto !important; margin-right: auto !important; }
.vm-sec > h2 { max-width: 22em; }
.vm-sec .vm-sub { max-width: 46em; }
.vm-faq > details { max-width: 56em; margin-left: auto !important; margin-right: auto !important; }