/* ============================================================
   Anmeldeseite der KI-Agenda-Challenge.

   Optik uebernommen aus dem Claude-Design-Handoff
   (sgc-ai-academy/design_handoff_challenge_page). Zwei bewusste
   Abweichungen vom Handoff, beide wegen Selinas Regeln:

   1. Gold ist #FFC300, nicht das Handoff-Gold #FCB02F. Das war ihr
      alter Wert und ist seit 06.07.2026 abgeloest.
   2. Poppins kommt aus /fonts/fonts.css (lokal gehostet), nicht von
      Google Fonts. Genau das haelt die Seite ohne Cookie-Banner.

   Die Seite hat weiter genau eine Aufgabe: die Anmeldung. Kein Menue,
   kein Preis, kein Verweis auf die Academy, nur Impressum und
   Datenschutz im Fuss.
   ============================================================ */

/* Barrierefreiheit: Sprunglink zum Inhalt (nur bei Tastaturfokus sichtbar) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    background: #FFC300;
    color: #370C7B;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    z-index: 10000;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

:root {
    --p-deep: #250854;
    --p-brand: #370C7B;
    --p-mid: #5A2DA0;
    --p-violet: #5A2DA0;
    --p-foot: #1A0640;
    --gold: #FFC300;
    --gold-end: #E5AF00;
    --gold-soft: #FFD740;
    --ink: #370C7B;
    --body: #4D4A55;
    --muted: #8A8794;
    --page: #FFFFFF;
    --tint: #F5F1FB;
    --tint-line: #E8E1F4;
    --field-line: #E2DBEF;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Poppins', system-ui, sans-serif;
    color: #2D2D2D;
    background: var(--page);
    -webkit-font-smoothing: antialiased;
}
/* Nur Textlinks einfaerben, NICHT die Buttons. Ohne das :not() gewinnt
   diese Regel (Spezifitaet a + Klasse) gegen .ch-btn-ghost (nur Klasse),
   und der Ghost-Button "Die 3 Tage ansehen" wird lila auf lila, unlesbar. */
.ch-page a:not([class*="ch-btn"]):not(.ch-header-cta) { color: var(--p-mid); text-decoration: none; }
.ch-page a:not([class*="ch-btn"]):not(.ch-header-cta):hover { color: var(--p-brand); }
.ch-btn-primary, .ch-btn-ghost { text-decoration: none; }
.ch-page h1, .ch-page h2, .ch-page h3 {
    margin: 0; line-height: 1.06; letter-spacing: -0.02em; font-weight: 800;
}
.ch-page p { margin: 0; }
::selection { background: var(--gold); color: var(--p-deep); }

.ch-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 64px); }

@keyframes ch-grad { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes ch-floatA { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,-30px) scale(1.15)} }
@keyframes ch-floatB { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-50px,40px) scale(1.1)} }
@keyframes ch-floatC { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,50px)} }
@keyframes ch-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,195,0,0.55)} 50%{box-shadow:0 0 0 16px rgba(255,195,0,0)} }

/* Scroll-Reveal. Ohne JS oder ohne aktivierte Animationen bleibt der
   Inhalt sichtbar, nichts versteckt sich hinter opacity:0. */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ===== STICKY HEADER ===== */
.ch-header {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px clamp(18px, 5vw, 64px);
    background: rgba(251, 249, 255, 0.82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(55, 12, 123, 0.08);
}
.ch-brand { display: flex; align-items: center; gap: 11px; }
.ch-brand img { height: 38px; width: auto; display: block; }
.ch-brand b { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.1; display: block; }
.ch-brand span { font-size: 12px; font-weight: 500; color: #7A6A9E; }
.ch-header-cta {
    padding: 11px 20px; border-radius: 999px;
    background: var(--gold); color: var(--p-deep);
    font-weight: 700; font-size: 14px;
    box-shadow: 0 6px 20px rgba(255, 195, 0, 0.35);
    animation: ch-pulse 2.8s infinite;
}
.ch-header-cta:hover { color: var(--p-deep); }

/* ===== HERO ===== */
.ch-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(120deg, #250854, #370C7B 35%, #5A2DA0 70%, #5A2DA0);
    background-size: 200% 200%;
    animation: ch-grad 14s ease infinite;
    padding: clamp(52px, 8vw, 96px) 0 clamp(90px, 12vw, 150px);
}
.ch-blob { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 0; }
.ch-blob-1 { width: 460px; height: 460px; top: -120px; right: -60px;
    background: radial-gradient(circle, rgba(255,195,0,0.34), transparent 70%); animation: ch-floatA 16s ease-in-out infinite; }
.ch-blob-2 { width: 380px; height: 380px; bottom: -100px; left: -80px;
    background: radial-gradient(circle, rgba(124,58,237,0.5), transparent 70%); animation: ch-floatB 20s ease-in-out infinite; }
.ch-blob-3 { width: 280px; height: 280px; top: 40%; left: 45%;
    background: radial-gradient(circle, rgba(255,195,0,0.18), transparent 70%); animation: ch-floatC 18s ease-in-out infinite; }

.ch-hero-inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(32px, 5vw, 72px); align-items: center;
}
.ch-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 16px; border-radius: 999px;
    background: rgba(255, 195, 0, 0.16); border: 1px solid rgba(255, 195, 0, 0.5);
    color: var(--gold-soft); font-size: 13px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.ch-eyebrow::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--gold); box-shadow: 0 0 10px 2px rgba(255, 195, 0, 0.7);
}
.ch-hero h1 {
    font-size: clamp(40px, 6.4vw, 76px); color: #fff; margin: 22px 0 18px;
}
.ch-gold-text {
    background: linear-gradient(100deg, var(--gold), var(--gold-soft));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ch-hero-sub {
    font-size: clamp(17px, 1.7vw, 21px); line-height: 1.55;
    color: rgba(255, 255, 255, 0.86); max-width: 560px;
}
.ch-hero-sub strong { color: #fff; }
.ch-feature-lines { margin: 24px 0 0; display: grid; gap: 9px; }
.ch-feature-lines span {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; color: rgba(255, 255, 255, 0.9);
}
.ch-feature-lines span::before { content: '\2726'; color: var(--gold); }
/* Dritte Zeile ist der Outcome, spielt auf die EU-AI-Act-Schulungspflicht
   an. Gold und kraeftiger als die zwei Fakten darueber, damit sie als
   Payoff liest. */
.ch-feature-lines span.is-payoff { color: var(--gold-soft); font-weight: 700; }
.ch-feature-lines span.is-payoff::before { content: '\2713'; }

.ch-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.ch-btn-primary {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 30px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--gold); color: var(--p-deep);
    font-family: inherit; font-size: 16px; font-weight: 800;
    box-shadow: 0 12px 30px rgba(255, 195, 0, 0.4);
    transition: transform .18s ease, box-shadow .18s ease;
}
.ch-btn-primary:hover { transform: translateY(-3px); color: var(--p-deep); box-shadow: 0 16px 38px rgba(255, 195, 0, 0.5); }
.ch-btn-ghost {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 26px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff; font-size: 16px; font-weight: 600; transition: background .18s ease;
}
.ch-btn-ghost:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

.ch-countdown { display: flex; gap: 12px; margin-top: 34px; }
.ch-cd {
    min-width: 74px; padding: 14px 10px; border-radius: 16px; text-align: center;
    background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16);
}
.ch-cd b { display: block; font-size: clamp(28px, 4vw, 42px); font-weight: 800; line-height: 1; color: #fff; }
.ch-cd.is-days b { color: var(--gold); }
.ch-cd span { display: block; margin-top: 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }

/* Video-Karte im Hero, laedt erst auf Klick (keine Fremd-Server beim Aufruf) */
.ch-video {
    position: relative; aspect-ratio: 1 / 1; border-radius: 24px; overflow: hidden;
    background: rgba(0, 0, 0, 0.34); border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ch-video-play {
    width: 78px; height: 78px; border-radius: 50%; background: var(--gold);
    display: flex; align-items: center; justify-content: center; color: var(--p-deep);
    box-shadow: 0 8px 26px rgba(255, 195, 0, 0.4); transition: transform .18s ease;
}
.ch-video:hover .ch-video-play { transform: scale(1.08); }
.ch-video-badge {
    position: absolute; left: 14px; bottom: 14px;
    padding: 7px 14px; border-radius: 999px; background: #fff; color: var(--ink);
    font-size: 13px; font-weight: 700;
}
.ch-video-hint {
    position: absolute; top: 14px; left: 14px; padding: 5px 12px; border-radius: 999px;
    background: rgba(255, 195, 0, 0.16); border: 1px solid rgba(255, 195, 0, 0.42);
    font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-soft);
}
.ch-video iframe, .ch-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }

/* ===== REGISTRIERUNGSKARTE, ueber den Hero gezogen ===== */
.ch-register { position: relative; z-index: 10; margin-top: -56px; margin-bottom: 0; }
.ch-card {
    max-width: 720px; margin: 0 auto; background: #fff; border-radius: 26px;
    padding: clamp(28px, 4vw, 44px); box-shadow: 0 30px 70px rgba(55, 12, 123, 0.16);
}
.ch-card h2 { font-size: clamp(26px, 3.4vw, 36px); color: var(--ink); text-align: center; }
.ch-card-sub { font-size: 15px; color: var(--body); text-align: center; margin: 8px 0 24px; }
.ch-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ch-field { display: flex; flex-direction: column; }
.ch-field.is-full { grid-column: 1 / -1; }
.ch-field label { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.ch-field input, .ch-field select {
    padding: 15px 16px; border: 1.5px solid var(--field-line); border-radius: 12px;
    font-size: 15px; color: var(--ink); background: #fff; transition: border-color .18s ease, box-shadow .18s ease;
}
.ch-field input:focus, .ch-field select:focus { outline: none; border-color: var(--p-violet); box-shadow: 0 0 0 3px rgba(55, 12, 123, 0.14); }
.ch-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ch-submit {
    grid-column: 1 / -1; margin-top: 6px; padding: 16px; border: 0; border-radius: 12px; cursor: pointer;
    background: linear-gradient(100deg, var(--gold), var(--gold-end)); color: var(--p-deep);
    font-family: inherit; font-size: 17px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    transition: transform .18s ease, box-shadow .18s ease;
}
.ch-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255, 195, 0, 0.4); }
.ch-fineprint { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: center; margin: 4px 0 0; }
.ch-fineprint a { text-decoration: underline; }
.ch-msg { grid-column: 1 / -1; margin-top: 4px; padding: 14px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; display: none; }
.ch-msg.is-ok { display: block; background: #F5F1FB; border: 1px solid #DCD2EE; color: var(--p-brand); }
.ch-msg.is-err { display: block; background: #FEF2F2; border: 1px solid #FDD; color: #991B1B; }

/* ===== ABSCHNITTE ===== */
.ch-section { padding: clamp(56px, 8vw, 100px) 0; }
.ch-section.is-light { background: #fff; }
.ch-section.is-tint { background: var(--page); }
.ch-eyebrow-2 { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-violet); }
.ch-h2 { font-size: clamp(28px, 3.6vw, 44px); color: var(--ink); margin: 12px 0; }
.ch-lead { font-size: 17px; line-height: 1.65; color: var(--body); }
.ch-head-center { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.ch-head-center .ch-eyebrow-2 { color: #9A6606; } /* Gold abgedunkelt fuer Kontrast auf hellem Grund (WCAG AA, 4.9:1) */
.ch-days .ch-head-center .ch-eyebrow-2 { color: var(--gold); } /* auf dunkler Tage-Sektion wieder helles Gold */

/* Beleg */
.ch-proof { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
.ch-proof-img { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(55, 12, 123, 0.16); }
.ch-proof-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-proof-cap { position: absolute; left: 14px; bottom: 14px; padding: 7px 14px; border-radius: 999px; background: rgba(42, 9, 96, 0.85); color: #fff; font-size: 13px; font-weight: 600; }
.ch-stats { display: grid; gap: 14px; margin-top: 24px; }
.ch-stat { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 4px 18px; align-items: baseline; padding: 16px 20px; border-radius: 14px; background: var(--page); border: 1px solid var(--tint-line); }
.ch-stat b { font-size: 24px; font-weight: 800; color: var(--p-violet); }
.ch-stat span { font-size: 14px; line-height: 1.5; color: var(--body); }
.ch-disclaimer { margin-top: 16px; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* Die drei Tage, dunkel */
.ch-days { background: linear-gradient(160deg, #250854, #370C7B 60%, #4A1290); color: #fff; position: relative; overflow: hidden; }
.ch-days .ch-h2, .ch-days .ch-lead { color: #fff; }
.ch-days .ch-lead { color: rgba(255, 255, 255, 0.82); }
.ch-day-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
.ch-day { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 20px; padding: 26px; display: flex; flex-direction: column; transition: transform .2s ease, background .2s ease; }
.ch-day:hover { transform: translateY(-6px); background: rgba(255, 255, 255, 0.1); }
.ch-day-no { font-size: 46px; font-weight: 800; line-height: 1; color: var(--gold); }
.ch-day-date { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin: 10px 0 12px; }
.ch-day h3 { font-size: 20px; color: #fff; margin-bottom: 10px; }
.ch-day p { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); margin-bottom: 18px; }
.ch-day-out { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.ch-day-out b { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 5px; }

/* Was Sie bekommen */
.ch-get-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.ch-get-card { background: #fff; border: 1px solid var(--tint-line); border-radius: 18px; padding: 24px; transition: transform .18s ease, box-shadow .18s ease; }
.ch-get-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(55, 12, 123, 0.12); }
.ch-get-card .ch-emoji { font-size: 26px; }
.ch-get-card h3 { font-size: 17px; color: var(--ink); margin: 12px 0 6px; }
.ch-get-card p { font-size: 14px; line-height: 1.55; color: var(--body); }
.ch-get-card.is-hi { background: linear-gradient(135deg, var(--p-brand), var(--p-mid)); border-color: transparent; }
.ch-get-card.is-hi h3, .ch-get-card.is-hi p { color: #fff; }
.ch-get-card.is-hi p { color: rgba(255, 255, 255, 0.86); }
.ch-get-card.is-gold { background: #FFFFFF; border-color: var(--gold); display: flex; flex-direction: column; justify-content: center; }
.ch-get-card.is-gold b { font-size: 17px; color: var(--ink); }
.ch-get-card.is-gold a { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 800; color: var(--p-brand); }

/* Fuer wen */
.ch-foryou { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ch-col { border-radius: 20px; padding: 30px; }
.ch-col.is-yes { background: var(--tint); border: 1px solid #DBC9FF; }
.ch-col.is-no { background: var(--page); border: 1px solid #E7E0F2; }
.ch-col-badge { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; margin-bottom: 16px; }
.ch-col.is-yes .ch-col-badge { background: var(--p-violet); color: #fff; }
.ch-col.is-no .ch-col-badge { background: #E7E0F2; color: var(--muted); }
.ch-col h3 { font-size: 19px; color: var(--ink); margin-bottom: 16px; }
.ch-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ch-col li { display: flex; gap: 11px; font-size: 15px; line-height: 1.55; }
.ch-col.is-yes li { color: #4B3A6B; }
.ch-col.is-no li { color: #8477A0; }
.ch-col.is-yes li::before { content: '\2726'; color: var(--gold); }
.ch-col.is-no li::before { content: '\2013'; color: var(--muted); }

/* Warum kostenlos */
.ch-free { background: linear-gradient(120deg, #F5F1FB, #EDE7F7); }
.ch-free-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.ch-free .ch-eyebrow-2 { color: #9A6606; } /* Gold abgedunkelt fuer Kontrast auf Creme-Grund (WCAG AA) */
.ch-free .ch-h2 { color: var(--ink); }
.ch-free p { font-size: 16px; line-height: 1.7; color: var(--body); margin-top: 14px; }
.ch-free p strong { color: var(--ink); }

/* Gastgeberin */
.ch-guide { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(30px, 5vw, 56px); align-items: center; }
.ch-guide-img { aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(55, 12, 123, 0.16); }
.ch-guide-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-guide p { font-size: 16px; line-height: 1.7; color: var(--body); margin-top: 14px; }
.ch-tuv { display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; padding: 16px 20px; border-radius: 16px; background: var(--page); border: 1px solid var(--tint-line); }
.ch-tuv img { height: 64px; width: auto; }
.ch-tuv span { font-size: 13.5px; line-height: 1.5; color: var(--body); }
.ch-tuv b { display: block; color: var(--ink); }

/* FAQ Akkordeon */
.ch-faq { max-width: 800px; margin: 0 auto; display: grid; gap: 12px; }
.ch-acc { background: #fff; border: 1px solid var(--tint-line); border-radius: 16px; overflow: hidden; }
.ch-acc-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--ink); text-align: left; }
.ch-acc-q::after { content: '+'; flex-shrink: 0; font-size: 24px; font-weight: 400; color: var(--p-violet); transition: transform .28s ease; line-height: 1; }
.ch-acc.is-open .ch-acc-q::after { transform: rotate(135deg); }
.ch-acc-a { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.ch-acc-a > div { padding: 0 22px 20px; font-size: 15px; line-height: 1.65; color: var(--body); }
.ch-acc-a strong { color: var(--ink); }

/* Schluss-CTA mit zweitem Formular auf Glas */
.ch-final { background: linear-gradient(120deg, #250854, #370C7B 45%, #5A2DA0); color: #fff; position: relative; overflow: hidden; }
.ch-final .ch-h2 { color: #fff; }
.ch-final .ch-lead { color: rgba(255, 255, 255, 0.82); }
.ch-final .ch-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: none; position: relative; z-index: 1; }
.ch-final .ch-card h2, .ch-final .ch-card-sub { color: #fff; }
.ch-final .ch-card-sub { color: rgba(255, 255, 255, 0.75); }
.ch-final .ch-field label { color: rgba(255, 255, 255, 0.85); }
.ch-final .ch-field input, .ch-field select { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); color: #fff; }
.ch-final .ch-field input::placeholder { color: rgba(255, 255, 255, 0.5); }
.ch-final .ch-field input:focus, .ch-field select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 195, 0, 0.2); }
.ch-final .ch-fineprint { color: rgba(255, 255, 255, 0.6); }
.ch-final .ch-fineprint a { color: rgba(255, 255, 255, 0.85); }

/* Footer */
.ch-footer { background: var(--p-foot); color: rgba(255, 255, 255, 0.75); padding: 40px clamp(18px, 5vw, 64px); }
.ch-footer-inner { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.ch-footer-brand { display: flex; align-items: center; gap: 11px; color: #fff; font-weight: 600; }
.ch-footer-brand img { height: 32px; }
.ch-footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; }
.ch-footer-links a.is-social { color: var(--gold); }
.ch-footer-links a.is-legal { color: rgba(255, 255, 255, 0.6); }
.ch-copy { max-width: 1180px; margin: 20px auto 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.45); }

/* Mitlaufender Knopf auf dem Handy */
.ch-sticky { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900; display: none; opacity: 0; transform: translateY(14px); transition: opacity .22s ease, transform .22s ease; }
.ch-sticky.is-da { opacity: 1; transform: none; }
.ch-sticky .ch-btn-primary { width: 100%; justify-content: center; }

/* ===== RESPONSIV ===== */
@media (max-width: 960px) {
    .ch-hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .ch-video { max-width: 420px; margin: 0 auto; width: 100%; }
    .ch-proof, .ch-guide { grid-template-columns: 1fr; }
    .ch-day-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .ch-foryou { grid-template-columns: 1fr; }
    .ch-sticky { display: block; }
    .ch-footer { padding-bottom: 84px; }
    .ch-header-cta { display: none; }
}
@media (max-width: 560px) {
    .ch-form { grid-template-columns: 1fr; }
    .ch-countdown { flex-wrap: wrap; }
    .ch-brand span { display: none; }
    .ch-stat { grid-template-columns: 1fr; }
}

/* Aufwand / Kosten / Ergebnis als drei klare Zeilen in der Gold-Kachel */
.ch-get-card.is-gold .ch-ecr { display: grid; gap: 6px; margin-bottom: 4px; }
.ch-get-card.is-gold .ch-ecr b { font-size: 15.5px; color: var(--ink); font-weight: 700; }
.ch-get-card.is-gold .ch-ecr b span { color: #B87908; }
.ch-get-card.is-gold .ch-ecr b.ch-ecr-result { color: #B87908; }

/* ============================================================
   BESTAETIGUNGSSTRECKE (Postfach, Bestaetigen, Danke)
   Eigene, schlanke Seiten im selben Design wie die Hauptseite:
   Sticky-Header oben (fixt das viel zu grosse Logo), darunter ein
   Verlaufs-Abschnitt mit einer weissen Karte.
   ============================================================ */
.ch-confirm {
    position: relative; overflow: hidden;
    background: linear-gradient(120deg, #250854, #370C7B 40%, #5A2DA0);
    padding: clamp(48px, 8vw, 88px) 0 clamp(56px, 9vw, 100px);
}
.ch-confirm-card {
    max-width: 640px; margin: 0 auto; text-align: center; position: relative; z-index: 1;
}
.ch-confirm-icon {
    width: 74px; height: 74px; margin: 0 auto 22px; border-radius: 50%;
    background: rgba(255, 195, 0, 0.16); border: 2px solid var(--gold); color: #B87908;
    display: flex; align-items: center; justify-content: center;
}
.ch-confirm-card h1 { font-size: clamp(26px, 3.6vw, 38px); color: var(--ink); margin: 0 0 12px; }
.ch-confirm-lead { font-size: 16px; line-height: 1.6; color: var(--body); margin: 0 0 26px; }
.ch-steps2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 28px; text-align: left; }
.ch-step2 { padding: 18px; border-radius: 14px; background: var(--page); border: 1px solid var(--tint-line); }
.ch-step2 b { display: block; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--p-violet); margin-bottom: 7px; }
.ch-step2 p { font-size: 13.5px; line-height: 1.55; color: var(--body); margin: 0; }
.ch-confirm-card .ch-btn-primary,
.ch-confirm-card .ch-btn-ghost { justify-content: center; }
.ch-confirm-error a { color: var(--p-mid); text-decoration: underline; }

.ch-note-card {
    max-width: 640px; margin: 0 auto; padding: 28px 32px;
    background: #fff; border-radius: var(--radius-lg, 18px);
    border-left: 5px solid var(--gold); box-shadow: 0 10px 30px rgba(55, 12, 123, 0.08);
}
.ch-note-card h2 { font-size: 1.3rem; color: var(--ink); margin: 0 0 10px; }
.ch-note-card p { font-size: 0.98rem; line-height: 1.65; color: var(--body); margin: 0; }
.ch-bring-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

@media (max-width: 720px) {
    .ch-steps2 { grid-template-columns: 1fr; }
    .ch-note-card { padding: 24px 22px; }
}

/* ===== VERKAUFS-ARCHITEKTUR: Schmerz, Vorher/Nachher, 3 Ueberzeugungen, CTA-Band ===== */
.ch-pain { background: var(--tint); }
.ch-pain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 940px; margin: 0 auto; }
.ch-pain-card { background: #fff; border: 1px solid var(--tint-line); border-radius: 16px; padding: 22px 24px; }
.ch-pain-card b { display: block; color: var(--p-brand); font-size: 1.05rem; margin-bottom: 6px; }
.ch-pain-card p { margin: 0; color: var(--body, #4a4458); font-size: 0.95rem; line-height: 1.6; }

.ch-shift { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 940px; margin: 42px auto 0; }
.ch-shift-col { border-radius: 16px; padding: 24px 26px; }
.ch-shift-col.is-from { background: #fff; border: 1px solid var(--tint-line); }
.ch-shift-col.is-to { background: linear-gradient(135deg, var(--p-brand), var(--p-mid)); color: #fff; }
.ch-shift-col > span { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.ch-shift-col.is-from > span { color: var(--p-violet); }
.ch-shift-col.is-to > span { color: var(--gold-soft); }
.ch-shift-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ch-shift-col li { font-size: 0.95rem; line-height: 1.5; padding-left: 24px; position: relative; }
.ch-shift-col.is-from li::before { content: "\2013"; position: absolute; left: 0; color: var(--p-violet); font-weight: 800; }
.ch-shift-col.is-to li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold); font-weight: 800; }

.ch-belief-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ch-belief { background: #fff; border: 1px solid var(--tint-line); border-radius: 16px; padding: 24px; }
.ch-belief-no { font-weight: 800; color: var(--gold-end); font-size: 1.4rem; line-height: 1; }
.ch-belief b { display: block; color: var(--p-brand); font-size: 1.05rem; margin: 10px 0 8px; }
.ch-belief p { margin: 0 0 14px; color: var(--body, #4a4458); font-size: 0.93rem; line-height: 1.6; }
.ch-belief-day { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--p-violet); background: var(--tint); padding: 6px 12px; border-radius: 999px; }

.ch-cta-band { background: linear-gradient(135deg, var(--p-brand), var(--p-mid)); padding: clamp(40px, 6vw, 64px) 0; }
.ch-cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ch-cta-band p { margin: 0; color: #fff; font-size: clamp(18px, 2.2vw, 22px); font-weight: 600; max-width: 660px; line-height: 1.5; }
.ch-cta-band .ch-btn-primary { flex: none; }

@media (max-width: 720px) {
    .ch-pain-grid, .ch-shift, .ch-belief-grid { grid-template-columns: 1fr; }
    .ch-cta-band-inner { flex-direction: column; text-align: center; }
}

/* Schmerz-Karten: Icon, Schatten, Hover (optische Aufwertung) */
.ch-pain-card { box-shadow: 0 6px 20px rgba(42, 9, 96, 0.05); transition: transform .2s ease, box-shadow .2s ease; }
.ch-pain-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(42, 9, 96, 0.13); }
.ch-pain-ico { display: inline-flex; width: 46px; height: 46px; border-radius: 13px; align-items: center; justify-content: center; background: rgba(255, 195, 0, 0.16); color: var(--gold-end); margin-bottom: 15px; }
.ch-pain-ico svg { width: 24px; height: 24px; }

/* ===== BESTAETIGUNGS-VIDEO auf der "You are in"-Seite ===== */
.ch-confirm-video {
    max-width: 420px; margin: 6px auto 26px; aspect-ratio: 1 / 1;
    border-radius: 20px; overflow: hidden; background: var(--p-deep);
    box-shadow: 0 20px 50px rgba(42, 9, 96, 0.22);
}
.ch-confirm-video video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Abschluss der Ehrlichkeits-Sektion: die Risikoumkehr aus dem
   Sprecherskript. Sie steht bewusst NACH den beiden Karten, weil sie die
   Frage beantwortet, die diese Karten aufwerfen ("und was, wenn ich nicht
   kaufen will?"). Ohne sie bleibt der Leser mit der Frage allein. */
.ch-pain-close {
    max-width: 720px;
    margin: 36px auto 0;
    text-align: center;
    font-size: 18px;
    line-height: 1.65;
    color: var(--body, #4a4458);
}
.ch-pain-close strong { color: var(--p-brand); }
@media (max-width: 720px) {
    .ch-pain-close { font-size: 16px; margin-top: 28px; }
}