/* Mobile visual-first hero: the proof owns the first viewport. */
@media (max-width: 600px) and (orientation: portrait) {
    .techart-home .header-nav .nav-cta {
        min-width: 104px;
        padding-inline: 10px;
        font-size: 0;
    }

    .techart-home .header-nav .nav-cta::after {
        content: 'Video pr\00fc fen';
        font-size: 0.76rem;
    }

    .techart-home .showcase {
        padding-top: 60px;
    }

    .techart-home .hero-stage {
        grid-template-rows: auto auto;
        overflow: hidden;
        background: var(--ta-paper);
    }

    .techart-home .hero-stage .workbench-main {
        position: relative;
        grid-row: 1;
        display: block;
        height: clamp(500px, 68svh, 860px);
        min-height: 500px;
        background: #050505;
    }

    .techart-home .hero-stage .video-wrapper {
        width: 100%;
        height: 100%;
        min-height: 100%;
        aspect-ratio: auto;
        background: #050505;
    }

    .techart-home .hero-stage .comparison-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: var(--hero-focus-x, 50%) var(--hero-focus-y, 50%);
        background: #050505;
    }

    .techart-home .video-labels {
        top: 14px;
        left: 18px;
        right: 18px;
    }

    .techart-home .video-label {
        min-height: 36px;
        padding-inline: 12px;
        display: inline-flex;
        align-items: center;
    }

    .techart-home .video-control-dock {
        position: absolute;
        z-index: 30;
        right: 12px;
        bottom: 16px;
        min-height: 0;
        padding: 0;
        gap: 6px;
        border: 0;
        background: transparent;
    }

    .techart-home .video-motion-toggle,
    .techart-home .zoom-toggle,
    .techart-home .video-next-toggle {
        width: 48px;
        height: 48px;
        min-height: 48px;
        border-color: rgba(255, 255, 255, 0.48);
        background: rgba(8, 10, 10, 0.76);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .techart-home .showcase-header {
        position: relative;
        grid-row: 2;
        width: 100%;
        padding: 24px 18px 26px;
        border-top: 1px solid var(--ta-line);
        background: var(--ta-paper);
        color: var(--ta-ink);
        box-shadow: none;
    }

    .techart-home .showcase .eyebrow {
        margin-bottom: 10px;
        color: var(--ta-muted);
    }

    .techart-home .showcase h1.headline {
        max-width: 12ch;
        color: var(--ta-ink);
        font-size: clamp(2.05rem, 10vw, 2.6rem);
        line-height: 1.02;
        text-shadow: none;
    }

    .techart-home .showcase .lead {
        max-width: 38ch;
        margin-top: 12px;
        color: var(--ta-muted);
        font-size: 0.91rem;
        line-height: 1.48;
    }

    .techart-home .hero-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        margin-top: 18px;
    }

    .techart-home .hero-actions .btn-primary {
        width: 100%;
        min-height: 52px;
        padding-inline: 14px;
    }

    .techart-home .hero-actions .btn-outline {
        width: auto;
        min-height: 52px;
        padding-inline: 10px;
        border: 0;
        background: transparent;
        color: var(--ta-ink);
        text-decoration: underline;
        text-decoration-color: rgba(21, 23, 25, 0.42);
        text-underline-offset: 5px;
    }

    .techart-home .hero-trustline {
        display: none;
    }
}

@media (max-width: 360px) and (orientation: portrait) {
    .techart-home .hero-actions {
        grid-template-columns: 1fr;
    }

    .techart-home .hero-actions .btn-outline {
        width: 100%;
        min-height: 44px;
    }
}