/* AIC-System — Nachbau der FunnelCockpit-Seiten (Upsell / Downsell / Danke)
 *
 * Übernommen aus den Exporten:
 *   Upsell 1  — funnelPage-Rnd8BYLEB6ZFKWh4Y  (slug: noch-nicht-fertig)
 *   Downsell  — funnelPage-sCjjyPWP3djiE44Ce  (slug: bist-du-dir-sicher)
 *   Danke     — funnelPage-Hnjw77jcyAXpaYwQw  (slug: revolution-danke)
 *
 * Markenfarben aus dem Export:
 *   0 = #FABB35   1 = rgb(25,43,71)   2 = rgb(228,228,228)   3 = #fff
 */

:root{
  --fc0:#FABB35;
  --fc1:rgb(25,43,71);
  --fc2:rgb(228,228,228);
  --fc3:#fff;
  --fc-dunkel:#2C2845;   /* Button- und Balkenfarbe der Upsell-Seite */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--fc3);
  color:var(--fc1);
  font-size:14px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--fc1);text-decoration:none}
a:hover{text-decoration:underline}
strong{font-weight:700}
.highlight{color:var(--fc0)}

/* ── Raster: FunnelCockpit arbeitet mit 12 Spalten ───────────────────── */
/* Die Inhaltsbreite kommt aus dem Original: Upsell und Downsell 920px,
   Danke-Seite 850px. Jede Seite setzt --fc-breite selbst. */
.fc-row{width:100%}
.fc-container{max-width:var(--fc-breite,920px);margin:0 auto;padding:0 15px;
  display:grid;grid-template-columns:repeat(12,1fr);gap:0}
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-7{grid-column:span 7}
.col-12{grid-column:span 12}

/* Die hervorgehobene Angebotsbox (im Export: #row-s6wjfsEA) */
/* Im Export traegt diese Zeile paddingTop/Bottom 55 und paddingLeft/Right 15;
   das zusaetzliche padding:30px aus den customStyles wird davon ueberschrieben. */
.fc-karte{
  width:1000px;max-width:100%;margin:auto;
  border:0 solid #E7E7E7;border-radius:5px;padding:55px 15px;
  box-shadow:0 1px 40px -8px rgba(103,103,103,.25);
}

/* ── Text ────────────────────────────────────────────────────────────── */
.fc-text p{margin:0 0 .35em}
.fc-text p:last-child{margin-bottom:0}
.mitte{text-align:center}
.durch{text-decoration:line-through;color:#ff0000}
.unter{text-decoration:underline}

/* ── Fortschrittsbalken ──────────────────────────────────────────────── */
.fc-fortschritt{
  width:100%;height:24px;border-radius:4px;background:var(--fc2);
  overflow:hidden;margin-top:14px;
}
.fc-fortschritt i{
  display:flex;align-items:center;justify-content:center;height:100%;
  color:var(--fc3);font-size:12px;font-weight:700;font-style:normal;
  /* Diagonale Streifen wie beim Bootstrap-Balken des Originals */
  background-image:linear-gradient(45deg,
    rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,
    rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  background-size:40px 40px;
  animation:fc-streifen 2s linear infinite;
}
@keyframes fc-streifen{from{background-position:40px 0}to{background-position:0 0}}

/* ── Knöpfe ──────────────────────────────────────────────────────────── */
.fc-knopf{
  display:block;width:100%;border:0;cursor:pointer;text-align:center;
  text-decoration:none !important;font-family:inherit;
  padding:25px 16px;border-radius:4px;font-weight:700;line-height:1.3;
}
.fc-knopf i{margin-right:8px}

.fc-ja{background:var(--fc-dunkel);color:#fff !important;font-size:22px}
.fc-ja-navy{background:var(--fc1);color:#fff !important;font-size:16px}
.fc-nein{
  background:#fff;color:var(--fc1) !important;font-size:15px;font-weight:700;
  border-radius:5px;padding:18px 36px;width:auto;margin:0 auto;display:inline-block;
}

/* Im Export: buttonAnimation "pulse", Wiederholung alle 10 s, Start nach 3 s */
@keyframes fc-pulse{
  0%,88%,100%{transform:scale(1)}
  92%{transform:scale(1.04)}
  96%{transform:scale(1)}
}
.fc-pulse{animation:fc-pulse 10s ease-in-out 3s infinite}

.fc-knopf-block{padding:25px 0}

/* ── Liste mit Häkchen ───────────────────────────────────────────────── */
.fc-liste{list-style:none}
.fc-liste li{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px;font-size:16px}
.fc-liste li:last-child{margin-bottom:0}
.fc-liste .haken{flex:none;font-size:19px;line-height:1.25;color:var(--fc1)}
.fc-liste .haken.gruen{color:rgb(5,212,0)}

/* ── Inhaltsbox ──────────────────────────────────────────────────────── */
.fc-box{background:var(--fc3);border-radius:8px}

/* ── Fußzeile ────────────────────────────────────────────────────────── */
.fc-fuss{font-size:12px;opacity:.5}
.fc-fuss a{color:var(--fc1)}

/* ── Mobil ───────────────────────────────────────────────────────────── */
/* Umbruchpunkt wie im Original: Bootstrap 3 schaltet bei 991px um, nicht bei 768px */
@media(max-width:991px){
  .fc-container{grid-template-columns:1fr;padding:0 15px}
  .col-3,.col-4,.col-5,.col-7,.col-12{grid-column:1 / -1}
  .fc-karte{padding:20px 15px;box-shadow:none}
  .fc-knopf{padding:20px 14px}
  .fc-ja{font-size:14px}
  .fc-ja-navy{font-size:14px}
  .mobil-mitte{text-align:center !important}
}