/* Landingpage AI Value Sprint / Werthebel-Sprint (27.10.2026).
   Gemeinsam fuer /ai-value-sprint/ und /de/werthebel-sprint/, baut auf /style.css auf. */

.sprint-hero {
    padding: 150px 0 80px;
    background:
        radial-gradient(ellipse at 85% 10%, rgba(255, 195, 0, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, #f7f4fc 0%, #ffffff 100%);
}
.sprint-hero-inner {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 56px;
    align-items: center;
}
.sprint-eyebrow {
    display: inline-block;
    background: var(--gold, #FFC300);
    color: var(--purple, #370C7B);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 20px;
}
.sprint-hero h1 {
    font-size: clamp(2.1rem, 4.4vw, 3.3rem);
    line-height: 1.12;
    color: var(--purple, #370C7B);
    font-weight: 700;
    letter-spacing: -0.5px;
}
.sprint-lead {
    margin-top: 20px;
    font-size: 1.15rem;
    line-height: 1.65;
    color: #4a4453;
    max-width: 620px;
}
.sprint-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
    margin-top: 32px;
}
.sprint-link-zweit {
    color: var(--purple, #370C7B);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.sprint-link-zweit:hover { color: #5a22b0; }
.sprint-fakten {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
    list-style: none;
    padding: 0;
}
.sprint-fakten li {
    background: #fff;
    border: 1px solid #e6e0ef;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 0.9rem;
    color: #3b3546;
}

/* Preis-Karte im Hero */
.sprint-preis-karte {
    background: #fff;
    border-radius: 22px;
    padding: 32px;
    box-shadow: 0 24px 60px rgba(55, 12, 123, 0.12);
    border: 1px solid #efe9f7;
}
.sprint-preis-karte .sprint-preis {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--purple, #370C7B);
    line-height: 1;
}
.sprint-preis-karte .sprint-preis small {
    font-size: 1rem;
    font-weight: 500;
    color: #6b6475;
}
.sprint-preis-karte ul {
    list-style: none;
    padding: 0;
    margin: 22px 0 24px;
}
.sprint-preis-karte li {
    position: relative;
    padding: 8px 0 8px 30px;
    border-bottom: 1px solid #f1edf6;
    color: #3b3546;
    line-height: 1.5;
}
.sprint-preis-karte li:last-child { border-bottom: none; }
.sprint-preis-karte li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 13px;
    width: 14px;
    height: 8px;
    border-left: 3px solid var(--gold, #FFC300);
    border-bottom: 3px solid var(--gold, #FFC300);
    transform: rotate(-45deg);
}
.sprint-preis-karte .btn { width: 100%; justify-content: center; }
.sprint-preis-hinweis {
    margin-top: 12px;
    font-size: 0.85rem;
    color: #6b6475;
    text-align: center;
}

/* Problem-Karten */
.sprint-karten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 40px;
}
.sprint-karte {
    background: #fff;
    border: 1px solid #ece6f4;
    border-radius: 18px;
    padding: 28px;
}
.sprint-karte h3 {
    color: var(--purple, #370C7B);
    font-size: 1.2rem;
    margin-bottom: 10px;
}
.sprint-karte p { color: #4a4453; line-height: 1.6; }
.sprint-zitat {
    margin: 44px auto 0;
    max-width: 760px;
    text-align: center;
    font-size: clamp(1.3rem, 2.6vw, 1.75rem);
    font-weight: 700;
    color: var(--purple, #370C7B);
    line-height: 1.35;
}
.sprint-zitat span { display: block; margin-top: 8px; font-size: 1rem; font-weight: 500; color: #6b6475; }

/* Ablauf */
.sprint-schritte {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 40px;
    counter-reset: schritt;
}
.sprint-schritt {
    position: relative;
    background: #f8f5fc;
    border-radius: 18px;
    padding: 30px 26px 26px;
}
.sprint-schritt-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--purple, #370C7B);
    color: #fff;
    font-weight: 700;
    margin-bottom: 16px;
}
.sprint-schritt h3 { color: var(--purple, #370C7B); font-size: 1.15rem; margin-bottom: 8px; }
.sprint-schritt p { color: #4a4453; line-height: 1.6; }
.sprint-fragen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    list-style: none;
    padding: 0;
}
.sprint-fragen li {
    background: #fff;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.85rem;
    color: var(--purple, #370C7B);
    font-weight: 600;
}

/* Ergebnis: Beispiel der einen Seite */
.sprint-ergebnis {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    align-items: center;
}
.sprint-blatt {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(55, 12, 123, 0.12);
    padding: 26px;
    border-top: 6px solid var(--gold, #FFC300);
    position: relative;
}
.sprint-blatt-kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}
.sprint-blatt-kopf strong { color: var(--purple, #370C7B); font-size: 1.05rem; }
.sprint-blatt-kopf em {
    font-style: normal;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8a8295;
}
.sprint-tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.sprint-tabelle th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #8a8295;
    padding: 6px 6px 8px;
    border-bottom: 1px solid #eee8f5;
}
.sprint-tabelle td {
    padding: 10px 6px;
    border-bottom: 1px solid #f3eff8;
    color: #2d2d2d;
    vertical-align: middle;
}
.sprint-tabelle tr.top td:first-child { font-weight: 700; color: var(--purple, #370C7B); }
.sprint-tabelle tr.top td:first-child::before {
    content: "\2605";
    color: var(--gold, #FFC300);
    margin-right: 6px;
}
.sprint-punkte { white-space: nowrap; letter-spacing: 2px; color: var(--purple, #370C7B); }
.sprint-punkte .aus { color: #ddd5e8; }
.sprint-blatt-fuss { margin-top: 12px; font-size: 0.8rem; color: #8a8295; }

/* Fuer wen */
.sprint-passt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 40px;
}
.sprint-passt > div {
    border-radius: 18px;
    padding: 28px;
}
.sprint-passt .ja { background: #f8f5fc; }
.sprint-passt .nein { background: #fafafa; border: 1px solid #eee; }
.sprint-passt h3 { font-size: 1.15rem; margin-bottom: 12px; color: var(--purple, #370C7B); }
.sprint-passt ul { padding-left: 20px; }
.sprint-passt li { margin: 8px 0; line-height: 1.55; color: #3b3546; }

/* Ueber Selina */
.sprint-person {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}
.sprint-person img {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 16px 40px rgba(55, 12, 123, 0.18);
}
.sprint-person h2 { color: var(--purple, #370C7B); font-size: 1.7rem; }
.sprint-person .zeile { color: #6b6475; font-weight: 600; margin: 4px 0 14px; }
.sprint-person p { line-height: 1.65; color: #3b3546; }

/* Abschluss */
.sprint-schluss {
    background: var(--purple, #370C7B);
    color: #fff;
    border-radius: 24px;
    padding: 48px 40px;
    text-align: center;
}
.sprint-schluss h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.sprint-schluss p { color: rgba(255, 255, 255, 0.85); margin: 12px auto 26px; max-width: 620px; line-height: 1.6; }
.sprint-schluss .sprint-cta-row { justify-content: center; }
.sprint-schluss .sprint-link-zweit { color: #fff; }
.sprint-schluss .btn-primary { background: var(--gold, #FFC300); color: var(--purple, #370C7B); }

@media (max-width: 900px) {
    .sprint-hero { padding: 120px 0 56px; }
    .sprint-hero-inner,
    .sprint-ergebnis,
    .sprint-passt { grid-template-columns: 1fr; gap: 32px; }
    .sprint-karten,
    .sprint-schritte { grid-template-columns: 1fr; }
    .sprint-person { grid-template-columns: 1fr; text-align: center; }
    .sprint-person img { margin: 0 auto; width: 170px; height: 170px; }
    .sprint-schluss { padding: 36px 22px; }
}

/* StoryBrand: Ebene des Problems (aussen, innen, grundsaetzlich) */
.sprint-karte-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8a6d00;
    background: rgba(255, 195, 0, 0.18);
    border-radius: 999px;
    padding: 4px 10px;
    margin-bottom: 12px;
}
/* StoryBrand: was auf dem Spiel steht */
.sprint-passt .nein h3 { color: #6b6475; }
.sprint-passt.einsatz .ja { background: var(--purple, #370C7B); }
.sprint-passt.einsatz .ja h3,
.sprint-passt.einsatz .ja li { color: #fff; }
.sprint-passt.einsatz .ja li::marker { color: var(--gold, #FFC300); }
.sprint-belege { list-style: none; padding: 0; margin-top: 16px; }
.sprint-belege li { padding: 4px 0 4px 22px; position: relative; color: #3b3546; }
.sprint-belege li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold, #FFC300); font-weight: 700; }
@media (max-width: 900px) { .sprint-belege { display: inline-block; text-align: left; } }


/* Heller Kopfbereich: Navigation von Anfang an in der Fassung fuer hellen Grund
   (dieselben Regeln wie .navbar.scrolled in style.css). */
.sprint-page .navbar {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    padding: 12px 0;
    box-shadow: 0 1px 0 rgba(55, 12, 123, 0.06), 0 8px 30px rgba(55, 12, 123, 0.07);
}
.sprint-page .navbar .nav-logo-img {
    height: 40px;
}
.sprint-page .navbar .nav-menu a {
    color: var(--gray-600);
}
.sprint-page .navbar .nav-menu a:hover {
    color: var(--purple);
    background: transparent;
}
.sprint-page .navbar .nav-menu > li > a.nav-active {
    color: var(--purple);
}
.sprint-page .navbar .nav-lang::before {
    background: var(--gray-200);
}
.sprint-page .navbar .nav-lang .lang-link {
    box-shadow: 0 0 0 1px rgba(55, 12, 123, 0.3);
}
.sprint-page .navbar .nav-lang .lang-link.lang-active {
    box-shadow: 0 0 0 2px var(--gold);
}
.sprint-page .navbar .nav-toggle span {
    background: var(--purple-dark);
}
/* Bei offenem Menue liegt hinter dem Knopf das dunkle Menue,
nicht mehr die
   helle Leiste. Ohne diese Regel waere das Kreuz dunkel auf dunkel und damit
   unsichtbar,
obwohl es anklickbar ist. */
.nav-toggle.open span,
.sprint-page .navbar .nav-toggle.open span {
    background: var(--white);
}
/* WICHTIG: .sprint-page .navbar traegt einen backdrop-filter,
und ein
       backdrop-filter macht das Element zum Bezugsrahmen fuer alle
       position:fixed-Kinder. Das offene Menue bezog sich dadurch nach dem
       Scrollen auf die 64px hohe Leiste statt auf das Fenster und war nur
       noch ein schmaler Streifen. Auf dem Handy bringt die Glasoptik nichts,
also faellt sie dort weg; die Masse in Fenstereinheiten sichern es
       zusaetzlich ab,
falls der Filter je zurueckkommt. */
    .sprint-page .navbar {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, 0.96);
    }
.sprint-page .navbar ~ .home-ticker { top: 64px; }
/* Wie style.css: auf dem Handy keine Unschaerfe, sonst wird die Navigation zum
   Bezugsrahmen des festen Menues und das Menue schrumpft auf einen Streifen. */
@media (max-width: 768px) {
    .sprint-page .navbar {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, 0.96);
    }
}

/* Raster-Kinder duerfen schrumpfen, sonst schiebt die Beispiel-Tabelle die Seite
   auf dem Handy in die Breite (und das Menue-Symbol aus dem Bild). */
.sprint-hero-inner > *,
.sprint-ergebnis > *,
.sprint-passt > * { min-width: 0; }
.sprint-blatt { overflow-x: auto; }
@media (max-width: 520px) {
    .sprint-blatt { padding: 18px 14px; }
    .sprint-tabelle { font-size: 0.8rem; }
    .sprint-tabelle th { font-size: 0.6rem; letter-spacing: 0; padding: 4px 3px 6px; }
    .sprint-tabelle td { padding: 8px 3px; }
    .sprint-punkte { letter-spacing: 0; font-size: 0.7rem; }
    .sprint-preis-karte { padding: 24px 20px; }
}