/* Anmeldeseite der KI-Agenda-Challenge.
   Bewusst ohne Navigation, ohne Preise, ohne Verweis auf die Academy: Die
   Seite hat genau eine Aufgabe, naemlich die Anmeldung. Jeder weitere Weg
   waere ein Ausgang. Nur Impressum und Datenschutz stehen im Fuss, die sind
   rechtlich Pflicht. */

.ch-topbar {
    padding: 20px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.ch-topbar img { height: 40px; width: auto; display: block; }
.ch-topbar-meta {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.62);
}

/* ===== HERO: Versprechen links, Formular rechts, beides ohne Scrollen ===== */
.ch-hero {
    position: relative;
    background: linear-gradient(150deg, #1A0640 0%, var(--purple) 55%, #4C1D95 100%);
    padding: 40px 0 72px;
    overflow: hidden;
}
.ch-hero::after {
    content: '';
    position: absolute;
    top: -180px; right: -140px;
    width: 520px; height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 195, 0, 0.16), transparent 68%);
    pointer-events: none;
}
.ch-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
}
.ch-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255, 195, 0, 0.14);
    border: 1px solid rgba(255, 195, 0, 0.35);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gold);
}
.ch-badge::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gold);
}
.ch-hero h1 {
    font-size: clamp(2rem, 4.2vw, 3.3rem);
    font-weight: 800;
    line-height: 1.12;
    color: #fff;
    margin: 22px 0 18px;
}
.ch-hero h1 em { font-style: normal; color: var(--gold); }
.ch-hero-sub {
    font-size: clamp(1rem, 1.7vw, 1.2rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    max-width: 560px;
}
.ch-hero-sub strong { color: #fff; }

.ch-facts {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: grid;
    gap: 11px;
}
.ch-facts li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 0.96rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}
.ch-facts svg { flex-shrink: 0; margin-top: 2px; color: var(--gold); }

/* ===== FORMULARKARTE ===== */
.ch-card {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}
.ch-card h2 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--purple);
    margin: 0 0 5px;
    text-align: center;
}
.ch-card-sub {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--gray-500);
    text-align: center;
    margin: 0 0 22px;
}
.ch-field { margin-bottom: 14px; }
.ch-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 5px;
}
.ch-field input {
    width: 100%;
    padding: 13px 15px;
    font-family: inherit;
    font-size: 0.97rem;
    color: var(--gray-800);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 11px;
    transition: var(--transition);
}
.ch-field input:focus {
    outline: none;
    background: #fff;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(55, 12, 123, 0.13);
}
.ch-card button { width: 100%; justify-content: center; margin-top: 6px; }
.ch-note {
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--gray-400);
    text-align: center;
    margin: 14px 0 0;
}
.ch-note a { color: var(--purple); text-decoration: underline; }
.ch-msg {
    margin-top: 15px;
    padding: 13px 15px;
    border-radius: 11px;
    font-size: 0.89rem;
    line-height: 1.5;
    display: none;
}
.ch-msg.is-ok { display: block; background: #ECFDF5; color: #065F46; }
.ch-msg.is-err { display: block; background: #FEF2F2; color: #991B1B; }

/* ===== COUNTDOWN ===== */
.ch-countdown {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
}
.ch-cd {
    min-width: 68px;
    padding: 12px 8px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    text-align: center;
}
.ch-cd b {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}
.ch-cd span {
    display: block;
    margin-top: 5px;
    font-size: 0.68rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

/* ===== DIE DREI TAGE ===== */
.ch-section { padding: 80px 0; }
.ch-section-head { text-align: center; max-width: 720px; margin: 0 auto 46px; }
.ch-section-head h2 {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 800;
    color: var(--gray-800);
    margin: 0 0 12px;
}
.ch-section-head p {
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--gray-500);
    margin: 0;
}
.ch-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ch-day {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 26px;
    display: flex;
    flex-direction: column;
    background: #fff;
    transition: var(--transition);
}
.ch-day:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ch-day-no {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: 10px;
}
.ch-day h3 {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--gray-800);
    margin: 0 0 10px;
}
.ch-day p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--gray-500);
    margin: 0 0 18px;
}
.ch-day-out {
    margin-top: auto;
    padding: 14px 16px;
    border-radius: 11px;
    background: var(--gray-50);
    font-size: 0.87rem;
    line-height: 1.5;
    color: var(--gray-800);
}
.ch-day-out b {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: 4px;
}

/* ===== FUER WEN, ABLAUF, GASTGEBERIN ===== */
.ch-alt { background: var(--gray-50); }
.ch-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: start;
}
.ch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.ch-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--gray-500);
}
.ch-list svg { flex-shrink: 0; margin-top: 3px; }
.ch-list.is-yes svg { color: #16A34A; }
.ch-list.is-no svg { color: var(--gray-400); }
.ch-two h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 16px;
}

.ch-host {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 34px;
    align-items: center;
    max-width: 880px;
    margin: 0 auto;
}
.ch-host img {
    width: 100%;
    border-radius: var(--radius-lg);
    display: block;
}
.ch-host h3 { font-size: 1.3rem; font-weight: 800; color: var(--gray-800); margin: 0 0 10px; }
.ch-host p { font-size: 0.97rem; line-height: 1.65; color: var(--gray-500); margin: 0 0 14px; }
.ch-host-tuv { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.ch-host-tuv img { height: 62px; width: auto; }
.ch-host-tuv span { font-size: 0.82rem; line-height: 1.45; color: var(--gray-500); }

/* ===== ABSCHLUSS ===== */
.ch-final {
    background: linear-gradient(135deg, var(--purple), #6D28D9);
    text-align: center;
    color: #fff;
}
.ch-final h2 { color: #fff; }
.ch-final .ch-section-head p { color: rgba(255, 255, 255, 0.8); }
.ch-final .ch-card { max-width: 560px; margin: 0 auto; text-align: left; }

.ch-foot {
    padding: 26px 32px;
    text-align: center;
    background: var(--gray-800);
}
.ch-foot p { font-size: 0.78rem; color: var(--gray-400); margin: 0; }
.ch-foot a { color: var(--gray-400); text-decoration: none; margin: 0 10px; }
.ch-foot a:hover { color: var(--gold); }

/* ===== DANKE-SEITE ===== */
.ch-danke { padding: 70px 0 80px; }
.ch-danke-box { max-width: 720px; margin: 0 auto; text-align: center; }
.ch-check {
    width: 74px; height: 74px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: rgba(255, 195, 0, 0.16);
    border: 2px solid var(--gold);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold);
}
.ch-danke h1 {
    font-size: clamp(1.8rem, 3.6vw, 2.7rem);
    font-weight: 800; line-height: 1.18; color: #fff; margin: 0 0 14px;
}
.ch-danke-lead {
    font-size: 1.05rem; line-height: 1.6;
    color: rgba(255, 255, 255, 0.82); margin: 0 0 34px;
}
.ch-steps {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 18px; margin: 0 0 38px; text-align: left;
}
.ch-step {
    padding: 22px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.13);
}
.ch-step b {
    display: block; font-size: 0.72rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
.ch-step p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: rgba(255, 255, 255, 0.84); }

/* Kollegin oder Kollegen mitbringen: die stärkste Bitte des Funnels, und
   genau hier ist der Moment, in dem jemand am ueberzeugtesten ist. */
.ch-bring {
    max-width: 720px; margin: 0 auto;
    background: #fff; border-radius: var(--radius-lg);
    padding: 32px; text-align: center;
}
.ch-bring h2 { font-size: 1.3rem; font-weight: 800; color: var(--purple); margin: 0 0 10px; }
.ch-bring p { font-size: 0.95rem; line-height: 1.6; color: var(--gray-500); margin: 0 0 22px; }
.ch-bring-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 960px) {
    .ch-hero-grid { grid-template-columns: 1fr; gap: 38px; }
    .ch-days, .ch-steps { grid-template-columns: 1fr; }
    .ch-two { grid-template-columns: 1fr; gap: 32px; }
    .ch-host { grid-template-columns: 1fr; text-align: center; max-width: 460px; }
    .ch-host img { max-width: 200px; margin: 0 auto; }
}
@media (max-width: 560px) {
    .ch-card, .ch-bring { padding: 24px 20px; }
    .ch-topbar { padding: 16px 20px; }
    .ch-topbar-meta { display: none; }
    .ch-cd { min-width: 58px; }
}

/* ===== BEWEISBILD: sie auf der Buehne, vor echtem Publikum ===== */
.ch-buehne {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 44px;
    align-items: center;
}
.ch-buehne-bild {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 18px 46px rgba(26, 6, 64, 0.22);
}
.ch-buehne-bild img { width: 100%; display: block; }
.ch-buehne-bild figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 26px 20px 14px;
    background: linear-gradient(transparent, rgba(26, 6, 64, 0.86));
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
}
.ch-buehne h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800;
    color: var(--gray-800); margin: 0 0 14px; line-height: 1.25; }
.ch-buehne p { font-size: 1rem; line-height: 1.65; color: var(--gray-500); margin: 0 0 16px; }
.ch-buehne p strong { color: var(--gray-800); }

/* Zahlen aus echten Projekten, kompakt. Kein Academy-Beleg, das ist
   gekennzeichnet, aber besser als gar keiner. */
/* Zeilen statt Kacheln: in der schmalen rechten Spalte bricht sonst
   schon "800.000 EUR" um, und eine umgebrochene Zahl wirkt nicht mehr wie
   eine Zahl. */
.ch-zahlen { display: grid; gap: 12px; margin-top: 26px; }
.ch-zahl {
    display: grid; grid-template-columns: minmax(120px, auto) 1fr;
    gap: 6px 18px; align-items: baseline;
    padding: 15px 18px; border-radius: 13px;
    background: var(--gray-50); border: 1px solid var(--gray-200);
}
.ch-zahl b { font-size: 1.22rem; font-weight: 800; color: var(--purple); line-height: 1.15; }
.ch-zahl span { font-size: 0.86rem; line-height: 1.5; color: var(--gray-500); }
.ch-zahlen-note { margin-top: 14px; font-size: 0.8rem; line-height: 1.5; color: var(--gray-400); }

/* ===== WAS SIE BEKOMMEN ===== */
.ch-wert { max-width: 760px; margin: 0 auto; }
.ch-wert-zeile {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 18px 0; border-bottom: 1px solid var(--gray-200);
}
.ch-wert-zeile:last-child { border-bottom: 0; }
.ch-wert-icon {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px;
    background: rgba(55, 12, 123, 0.09); color: var(--purple);
    display: flex; align-items: center; justify-content: center;
}
.ch-wert-zeile b { display: block; font-size: 1rem; color: var(--gray-800); margin-bottom: 3px; }
.ch-wert-zeile span { font-size: 0.92rem; line-height: 1.55; color: var(--gray-500); }
.ch-wert-summe {
    margin-top: 26px; padding: 20px 24px; border-radius: var(--radius-lg);
    background: var(--purple); color: #fff; text-align: center;
    font-size: 1.05rem; font-weight: 700;
}
.ch-wert-summe span { color: var(--gold); }

/* ===== WARUM KOSTENLOS ===== */
.ch-warum {
    max-width: 720px; margin: 0 auto; padding: 34px 38px;
    border-radius: var(--radius-lg); background: #fff;
    border-left: 5px solid var(--gold);
    box-shadow: var(--shadow-md);
}
.ch-warum h2 { font-size: 1.4rem; font-weight: 800; color: var(--gray-800); margin: 0 0 14px; }
.ch-warum p { font-size: 0.99rem; line-height: 1.7; color: var(--gray-500); margin: 0 0 12px; }
.ch-warum p:last-child { margin-bottom: 0; }
.ch-warum strong { color: var(--gray-800); }

/* ===== FAQ ===== */
.ch-faq { max-width: 780px; margin: 0 auto; }
.ch-faq details {
    border: 1px solid var(--gray-200); border-radius: 14px;
    margin-bottom: 12px; background: #fff; overflow: hidden;
}
.ch-faq summary {
    padding: 18px 22px; cursor: pointer; list-style: none;
    font-size: 1rem; font-weight: 700; color: var(--gray-800);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.ch-faq summary::-webkit-details-marker { display: none; }
.ch-faq summary::after {
    content: '+'; flex-shrink: 0; font-size: 1.4rem; font-weight: 400;
    color: var(--purple); line-height: 1; transition: transform .2s;
}
.ch-faq details[open] summary::after { transform: rotate(45deg); }
.ch-faq details > div {
    padding: 0 22px 20px; font-size: 0.94rem; line-height: 1.65; color: var(--gray-500);
}
.ch-faq details > div strong { color: var(--gray-800); }

/* ===== WIEDERHOLTER ANMELDE-KNOPF ===== */
.ch-anker { text-align: center; margin-top: 40px; }

@media (max-width: 960px) {
    .ch-buehne { grid-template-columns: 1fr; gap: 30px; }
    .ch-zahlen { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .ch-warum { padding: 26px 22px; }
}

/* ===== VIDEO: Platzhalter, bis Selinas Aufnahme da ist =====
   Bewusst kein automatisch geladener Player: ein eingebettetes YouTube-
   oder Vimeo-Fenster laedt beim Seitenaufruf Fremdinhalte und braeuchte
   damit wieder eine Einwilligung. Erst der Klick laedt den Anbieter. */
.ch-video {
    position: relative;
    margin: 0 0 26px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.16);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    text-align: center;
    padding: 24px;
}
.ch-video-play {
    width: 66px; height: 66px; border-radius: 50%;
    background: var(--gold); color: var(--purple);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 26px rgba(255, 195, 0, 0.34);
}
.ch-video p {
    margin: 0; font-size: 0.92rem; line-height: 1.5;
    color: rgba(255, 255, 255, 0.78); max-width: 320px;
}
.ch-video-hinweis {
    position: absolute; top: 12px; left: 12px;
    padding: 5px 12px; border-radius: 999px;
    background: rgba(255, 195, 0, 0.16);
    border: 1px solid rgba(255, 195, 0, 0.4);
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--gold);
}
.ch-video iframe, .ch-video video {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* ===== MITLAUFENDER KNOPF AUF DEM HANDY =====
   Auf dem Handy stapelt sich der Hero, das Formular beginnt erst nach gut
   einem Bildschirm. Statt die Reihenfolge zu verbiegen, laeuft der Knopf
   einfach mit. Er erscheint erst, wenn das Formular oben aus dem Bild ist,
   und verschwindet wieder, sobald man es erreicht. */
.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 .btn { width: 100%; justify-content: center; box-shadow: 0 8px 26px rgba(0, 0, 0, .4); }

@media (max-width: 960px) {
    .ch-sticky { display: block; }
}
@media (max-width: 960px) {
    /* Fusszeile nicht vom Knopf verdecken lassen */
    .ch-foot { padding-bottom: 84px; }
}