/*
 * home.css – nur für die Startseite (index.html), lädt nach style.css.
 *
 * Idee: Die Seite sieht aus wie das Panel. Dieselben Flächen (#16141b,
 * #211d2a), dasselbe Caption-Gelb als einzige laute Farbe, Violett nur für
 * den Musikmodus, Überschriften in Bricolage Grotesque wie im Panel-Kopf
 * und im Pro-Dialog. Die Captions in den Demos stehen in Arial Black –
 * so sehen sie im Video auch aus.
 */

.home h1,
.home h2,
.home .h-display {
    font-family: var(--brand);
    font-weight: 800;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.home h1 {
    font-size: clamp(38px, 6.2vw, 68px);
    line-height: 1.02;
    margin: 0;
}

.home h2 {
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.06;
    margin: 0;
}

.home section { padding: 88px 0; }
.home .lead {
    font-size: clamp(17px, 1.6vw, 19px);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 34ch;
    margin: 0;
}

/* Ein Wort im Box-Stil hervorgehoben – wie die Box-Captions im Plugin */
.boxword {
    display: inline-block;
    background: var(--caption);
    color: var(--caption-ink);
    padding: 0 0.18em;
    border-radius: 0.16em;
    transform: rotate(-1.5deg);
}

/* ---------------------------------------------------------------- Hero */
.h-hero { padding: 64px 0 80px; overflow: hidden; }

.h-hero .shell {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    gap: 56px;
}

.h-hero .copy { display: flex; flex-direction: column; gap: 24px; }

.eyebrow-chip {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 12px;
}

.eyebrow-chip i {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18);
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-row .btn--loud { font-size: 17px; padding: 15px 24px; }
.link-arrow {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    padding: 12px 6px;
}
.link-arrow:hover { color: var(--caption); }

.trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 14px;
    color: var(--ink-soft);
}
.trust li { display: flex; align-items: center; gap: 7px; }
.trust li::before { content: "✓"; color: var(--ok); font-weight: 800; }

/* ------------------------------------------------- Live-Demo (Telefon) */
.stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.stage::before {
    /* weiches Leuchten hinter dem Telefon */
    content: "";
    position: absolute;
    inset: 8% -6% 18%;
    background: radial-gradient(closest-side, rgba(255, 225, 77, 0.16), transparent 70%),
                radial-gradient(closest-side at 70% 70%, rgba(169, 139, 255, 0.18), transparent 70%);
    filter: blur(20px);
    z-index: 0;
}

.phone {
    position: relative;
    z-index: 1;
    width: min(300px, 74vw);
    aspect-ratio: 9 / 16;
    border-radius: 36px;
    padding: 10px;
    background: #0d0b11;
    border: 1px solid #3a3346;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.phone .screen-v {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 28px;
    overflow: hidden;
    /* Hintergrund wie echtes Videomaterial (Studio-Standbild, ohne Personen),
       unten abgedunkelt, damit die Captions stehen wie im Feed */
    background:
        linear-gradient(180deg, rgba(13, 11, 17, 0.05) 30%, rgba(13, 11, 17, 0.55) 100%),
        url("img/demo-studio.webp") center 30% / cover no-repeat,
        #1e1928;
}

.phone .screen-v::after {
    /* leichtes Filmkorn */
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 3px 3px;
    mix-blend-mode: overlay;
}

.phone .rec {
    position: absolute;
    top: 16px; left: 16px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.75);
    display: flex; align-items: center; gap: 6px;
}
.phone .rec::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: #ff5a5a;
}

/* Captions im Telefon – Arial Black wie im gerenderten Video */
.pcap {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 22%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.18em 0.3em;
    font-family: var(--capfont);
    font-weight: 900;
    font-size: clamp(21px, 2.1vw, 26px);
    line-height: 1.12;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
    -webkit-text-stroke: 1.4px #000;
    paint-order: stroke fill;
}

.pcap span { display: inline-block; transition: transform 0.16s cubic-bezier(.3,1.6,.5,1), color 0.12s, opacity 0.12s, background-color 0.12s; }

/* Pop: aktives Wort gelb und größer */
.pcap[data-stil="pop"] span.on { color: var(--caption); transform: scale(1.16); }

/* Karaoke: gesprochene Wörter füllen sich */
.pcap[data-stil="karaoke"] span { color: rgba(255, 255, 255, 0.55); }
.pcap[data-stil="karaoke"] span.done,
.pcap[data-stil="karaoke"] span.on { color: #3dff8a; }

/* Box: aktives Wort auf gelbem Balken */
.pcap[data-stil="box"] { -webkit-text-stroke: 0; text-shadow: none; }
.pcap[data-stil="box"] span { padding: 0.04em 0.16em; border-radius: 0.14em; }
.pcap[data-stil="box"] span.on { background: var(--caption); color: var(--caption-ink); }

/* Pille: ganze Zeile auf hellem Balken */
.pcap[data-stil="pill"] {
    -webkit-text-stroke: 0; text-shadow: none;
    left: 12%; right: 12%;
    background: #f5f2fa;
    color: #18141f;
    border-radius: 14px;
    padding: 0.35em 0.5em;
    text-transform: none;
    font-size: clamp(18px, 1.8vw, 22px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.pcap[data-stil="pill"] span.on { color: #6b4fd8; }

/* Typewriter: Wörter erscheinen erst, wenn sie gesprochen werden */
.pcap[data-stil="typer"] span { opacity: 0; }
.pcap[data-stil="typer"] span.done,
.pcap[data-stil="typer"] span.on { opacity: 1; }
.pcap[data-stil="typer"] span.on { color: var(--caption); }

/* Neon (neu in 0.9.35): ohne Kontur, aktives Wort leuchtet pink */
.pcap[data-stil="neon"] { -webkit-text-stroke: 0; color: #ede7ff; text-shadow: 0 0 6px rgba(237, 231, 255, 0.35); }
.pcap[data-stil="neon"] span.on { color: #fff; text-shadow: 0 0 6px #ff4fd8, 0 0 16px #ff4fd8, 0 0 30px rgba(255, 79, 216, 0.7); }

/* Marker (neu in 0.9.35): gelber Textmarker hinter dem aktiven Wort */
.pcap[data-stil="marker"] span { padding: 0 0.12em; }
.pcap[data-stil="marker"] span.on { color: #111; -webkit-text-stroke: 0; text-shadow: none; background: linear-gradient(100deg, transparent 2%, #ffe14d 6%, #ffe14d 94%, transparent 98%); border-radius: 0.08em; transform: rotate(-1.5deg); }

/* Fokus (neu in 0.9.40): Schlüsselwörter groß und orange in eigener Zeile,
   der Rest klein und weiß. Wörter erscheinen einfach, ohne Pop. */
.pcap[data-stil="focus"] {
    -webkit-text-stroke: 0;
    text-transform: none;
    gap: 0 0.28em;
    line-height: 1.02;
    font-size: clamp(16px, 1.6vw, 20px);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.pcap[data-stil="focus"] span { transition: none; opacity: 0; }
.pcap[data-stil="focus"] span.done,
.pcap[data-stil="focus"] span.on { opacity: 1; }
.pcap[data-stil="focus"] span.key { color: #ff7a1a; font-size: 1.85em; flex-basis: 100%; text-align: center; }

/* Stil-Knöpfe – sehen aus wie im Panel */
.chips {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.chip-btn {
    appearance: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color 0.13s, color 0.13s, background 0.13s;
}
.chip-btn:hover { color: var(--ink); border-color: #4a4058; }
.chip-btn[aria-pressed="true"] {
    color: var(--caption-ink);
    background: var(--caption);
    border-color: var(--caption);
}
.chip-btn:focus-visible { outline: 2px solid var(--caption); outline-offset: 2px; }

/* PRO-Marke – exakt die aus dem Panel */
.pro-tag {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 3px;
    color: var(--caption-ink);
    background: var(--caption);
}
.chip-btn[aria-pressed="true"] .pro-tag { background: var(--caption-ink); color: var(--caption); }
.new-tag { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; line-height: 1; padding: 2px 4px; border-radius: 3px; color: #fff; background: #7c5cff; }

.stage-note { position: relative; z-index: 1; font-size: 12.5px; color: var(--mute); margin: 0; }

/* -------------------------------------------------------- Drei Schritte */
.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 40px;
}

.step {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.step .num {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: grid; place-items: center;
    font-family: var(--brand);
    font-weight: 800;
    color: var(--caption-ink);
    background: var(--caption);
}

.step h3 { margin: 4px 0 0; font-size: 19px; font-weight: 700; }
.step p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }

/* Vier Karten (Neu in 0.9.39): zwei Spalten, mobil eine (Regel unten) */
.steps.steps--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.step h3 .pro-tag { vertical-align: 3px; margin-left: 4px; }
.center-head .eyebrow-chip { align-self: center; }

.center-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.center-head .lead { max-width: 46ch; }

/* ---------------------------------------------------------- Musikmodus */
.music {
    background: linear-gradient(180deg, transparent, rgba(169, 139, 255, 0.06) 40%, transparent);
}

.music .shell {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 48px;
    align-items: center;
}

.music .copy { display: flex; flex-direction: column; gap: 20px; }
.music .tag {
    align-self: flex-start;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--vocal);
    border: 1px solid rgba(169, 139, 255, 0.4);
    border-radius: 999px; padding: 4px 11px;
}

.bignums { display: flex; align-items: baseline; gap: 18px; }
.bignums .n { font-family: var(--brand); font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: -0.03em; }
.bignums .n.dim { color: var(--mute); }
.bignums .n.hot { color: var(--caption); }
.bignums .arrow { color: var(--vocal); font-size: 28px; }
.bignums small { display: block; font-family: var(--body); font-weight: 400; font-size: 13px; color: var(--mute); letter-spacing: 0; margin-top: 6px; }

.music .demo { margin: 0; }

/* ----------------------------------------------------------- Vergleich */
.vs-wrap { margin-top: 40px; overflow-x: auto; }

.vs {
    width: 100%;
    min-width: 560px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
}

.vs th, .vs td {
    padding: 14px 16px;
    text-align: center;
    border-bottom: 1px solid var(--line-soft);
}

.vs th:first-child, .vs td:first-child { text-align: left; color: var(--ink-soft); }
.vs thead th { font-size: 13px; font-weight: 600; color: var(--mute); }
.vs thead th.us {
    color: var(--caption-ink);
    background: var(--caption);
    border-radius: 12px 12px 0 0;
    font-family: var(--brand);
    font-weight: 800;
    font-size: 16px;
}
.vs td.us { background: rgba(255, 225, 77, 0.07); font-weight: 700; color: var(--ink); }
.vs tr:last-child td.us { border-radius: 0 0 12px 12px; }
.vs .y { color: var(--ok); font-weight: 800; }
.vs .n { color: var(--mute); }
.vs-note { font-size: 12px; color: var(--mute); margin: 12px 0 0; }

/* -------------------------------------------------------------- Preise */
.home .tiers { margin-top: 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; }
.home .tier .t-price { font-family: var(--brand); }
.anchor { font-size: 13.5px; color: var(--mute); margin-top: -6px; }
.anchor s { color: var(--ink-soft); }

/* ------------------------------------------------------------ Abschluss */
.final {
    text-align: center;
    background:
        radial-gradient(60% 80% at 50% 120%, rgba(255, 225, 77, 0.14), transparent 70%),
        var(--ground);
}
.final .shell { display: flex; flex-direction: column; align-items: center; gap: 22px; }

/* ------------------------------------------------------------- Responsiv */
@media (max-width: 900px) {
    .h-hero .shell, .music .shell { grid-template-columns: 1fr; gap: 44px; }
    .h-hero .copy { align-items: flex-start; }
    .steps, .steps.steps--vier { grid-template-columns: 1fr; }
    .home .tiers { grid-template-columns: 1fr; }
    .home section { padding: 64px 0; }
}

@media (max-width: 480px) {
    .shell { padding: 0 16px; }
    .bignums .n { font-size: 50px; }
    .cta-row .btn--loud { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .pcap span { transition: none; }
}

/* Nur für Screenreader sichtbar */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* Vergleich: Häkchen auch in der CapBeat-Spalte grün, Kopfzeile ohne
   die Mono-Schrift aus style.css */
.vs td.us.y { color: var(--ok); font-size: 18px; }
.vs thead th { font-family: var(--body); text-transform: none; letter-spacing: 0; }
.vs thead th.us { font-family: var(--brand); }

@media (max-width: 640px) {
    .vs { min-width: 0; table-layout: fixed; font-size: 13.5px; }
    .vs th, .vs td { padding: 11px 6px; }
    .vs th:first-child, .vs td:first-child { width: 34%; }
    .vs thead th { font-size: 12px; }
    .vs thead th.us { font-size: 14px; }
}
.vs th, .vs td { white-space: normal; line-height: 1.25; overflow-wrap: anywhere; }
.home .tier--lead::before { content: "No subscription"; }