/* Hero-Variante: zwei gleich große Karten für Patienten- und KI-Empfehlungen. */
/* Lokale, unabhängig flackernde Glut- und Schattenfelder. Die Schrift bleibt fest. */
#hero-title .line-gradient-text {
    background-image:
        radial-gradient(ellipse var(--ember-shadow-size, 12%) 130% at var(--ember-shadow-x, 60%) var(--ember-shadow-y, 50%), rgba(63, 28, 10, var(--ember-shadow-alpha, 0.4)) 10%, transparent 100%),
        radial-gradient(ellipse var(--ember-coal-size, 14%) 110% at var(--ember-coal-x, 82%) var(--ember-coal-y, 40%), rgba(91, 39, 9, var(--ember-coal-alpha, 0.4)) 5%, transparent 100%),
        radial-gradient(ellipse var(--ember-glow-size, 16%) 140% at var(--ember-glow-x, 48%) var(--ember-glow-y, 50%), rgba(245, 166, 36, var(--ember-glow-alpha, 0.4)), transparent 100%),
        linear-gradient(115deg, var(--green) 0%, var(--green) 36%, var(--kicker) 58%, var(--kicker) 84%, var(--anthracite) 116%);
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

html[data-hero-embers="off"] #hero-title .line-gradient-text {
    background-image: linear-gradient(115deg, var(--green) 0%, var(--green) 36%, var(--kicker) 58%, var(--kicker) 84%, var(--anthracite) 116%);
}

@media (prefers-reduced-motion: reduce) {
    #hero-title .line-gradient-text {
        animation: none;
        background-image: linear-gradient(115deg, var(--green) 0%, var(--green) 36%, var(--kicker) 58%, var(--kicker) 84%, var(--anthracite) 116%);
        background-size: 100% 100%;
        background-position: 0 0;
    }
}

.hero-visual.hero-visual--pair {
    display: block;
    width: min(1064px, 100%);
    max-width: 1064px;
    min-height: 0;
    margin: 24px auto 0;
    padding-top: 42px;
    isolation: isolate;
}

.hero-visual--pair::before {
    content: none;
}

.hero-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.hero-visual--pair .hero-card-grid > .chat-card {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    will-change: auto;
}

.hero-visual--pair .chat-head {
    flex: none;
}

.hero-visual--pair .chat-head-txt {
    min-width: 0;
}

.hero-visual--pair .chat-ai-more {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: 7px;
    margin-left: auto;
    color: #7b8ba0;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.hero-visual--pair .chat-ai-more img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.hero-visual--pair .chat-head .live-dot {
    flex: none;
    margin-left: 12px;
}

.hero-visual--pair .hero-review-logo svg {
    width: 24px;
    height: 24px;
}

.hero-visual--pair .hero-review-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
}

.hero-visual--pair .hero-review-quote {
    margin: 0;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    color: #3d5066;
    text-wrap: pretty;
}

.hero-visual--pair .hero-review-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 8px;
}

.hero-visual--pair .hero-review-stars svg {
    width: 19px;
    height: 19px;
    fill: var(--anthracite);
}

.hero-visual--pair .hero-review-quote p {
    margin: 0;
}

.hero-visual--pair .hero-review-quote mark {
    margin: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font-weight: 600;
}

.hero-visual--pair .hero-review-metrics {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: auto 2px 0;
    color: var(--text-light);
    font-size: 12px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

.hero-review-metrics > span {
    white-space: nowrap;
}

.hero-review-metrics strong {
    color: var(--anthracite);
    font-size: 15px;
}

.hero-review-metrics .hero-review-growth {
    margin-left: auto;
    color: var(--green-dark);
    font-weight: 600;
}

.hero-visual.hero-visual--pair .hand-note {
    display: block;
    position: absolute;
    inset: 0 auto auto 32px;
    margin: 0;
    text-align: left;
    font-family: var(--hand);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.25;
    color: #2c4a68;
    transform: rotate(-2deg) !important;
    white-space: normal;
}

.hero-disclaimer {
    max-width: 1064px;
    margin: 16px auto 0;
    color: #73818d;
    font-size: 10px;
    line-height: 1.5;
    text-align: center;
    text-wrap: pretty;
}

@media (max-width: 1000px) {
    .hero-card-grid {
        gap: 18px;
    }

    .hero-visual--pair .chat-head {
        gap: 8px;
        padding-inline: 14px;
    }

    .hero-visual--pair .chat-head .live-dot {
        margin-left: 4px;
    }

    .hero-visual--pair .chat-ai-more {
        gap: 5px;
        font-size: 11px;
    }
}

@media (max-width: 900px) {
    .hero .hero-grid {
        display: block;
    }

    .hero-visual.hero-visual--pair {
        max-width: 520px;
        margin-top: 30px;
    }

    .hero-card-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: 1fr;
        gap: 20px;
    }

    .hero-visual.hero-visual--pair .hand-note {
        left: 14px;
    }

    .hero-disclaimer {
        max-width: 520px;
    }
}

@media (max-width: 380px) {
    .hero-visual--pair .chat-head {
        flex-wrap: wrap;
    }

    .hero-visual--pair .chat-ai-more {
        order: 1;
        flex-basis: calc(100% - 46px);
        margin-left: 46px;
    }

    .hero-visual--pair .chat-head .live-dot {
        margin-left: auto;
    }

    .hero-visual.hero-visual--pair .hand-note {
        font-size: 1.15rem;
        white-space: nowrap;
    }

    .hero-visual--pair .hero-review-growth {
        margin-left: 0;
    }
}