/* Mobile Stabilisierung: Startseite und Fallstudien */
@media (max-width: 900px) {
    body.page-home,
    body.page-cases {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    body.page-home :where(h1, h2, h3, p, blockquote),
    body.page-cases :where(h1, h2, h3, p, blockquote) {
        overflow-wrap: break-word;
    }

    body.page-home :where(img, video, iframe),
    body.page-cases :where(img, video, iframe) {
        max-width: 100%;
    }

    .page-home :where(#impact, #cases, #growth-system, #alles-drin, #ki-bonus, #erwartet-dich, #strategie-partner, #kontakt),
    .page-cases :where(#filter, #casesGrid, #bewertungen, #fallstudien-system, #fallstudien-cta) {
        scroll-margin-top: 96px;
    }

    /* Startseite: Vergleichssektion ohne fehlerhaften Sticky-Stack. */
    .page-home .impact-section {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    .page-home .impact-stage {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 96px 18px 30px !important;
        overflow: visible !important;
    }

    .page-home .stage-intro {
        width: 100%;
        max-width: 360px;
        margin: 0 auto 30px !important;
    }

    .page-home .stage-h1 {
        max-width: 350px;
        margin-inline: auto;
        font-size: clamp(28px, 8.2vw, 38px) !important;
        line-height: 1.14 !important;
        letter-spacing: -0.035em !important;
    }

    .page-home .stage-logo {
        margin-top: 14px !important;
    }

    .page-home .impact-pairs {
        width: 100%;
        max-width: 480px;
        margin: 0 auto !important;
        padding: 28px 16px 18px !important;
    }

    .page-home .impact-pairs .pair {
        position: relative !important;
        top: auto !important;
        width: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0 0 24px !important;
        transform: none !important;
    }

    .page-home .impact-pairs .pair:last-of-type {
        margin-bottom: 0 !important;
    }

    .page-home .pair-card {
        width: 100%;
        min-width: 0;
    }

    .page-home .pair-card-left,
    .page-home .pair-card-right {
        transform: none !important;
    }

    .page-home .pair-card-left,
    .page-home .pair-card-left.is-passed {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    .page-home .pair-card-left.is-passed .pair-text {
        color: #fff !important;
        text-decoration: none !important;
    }

    .page-home .pair-card-left.is-passed .pair-eyebrow {
        color: rgba(255,255,255,0.54) !important;
    }

    .page-home .pair-text,
    .page-home .pair-text * {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .page-home .impact-section .impact-text {
        width: 100% !important;
        padding: 72px 18px 80px !important;
        overflow: visible !important;
    }

    .page-home .growth-spacer {
        display: none !important;
        height: 0 !important;
    }

    /* Beide Menüs müssen auf kleinen/kurzen Displays vollständig scrollbar sein. */
    body.page-home .mobile-overlay,
    body.page-cases .mobile-overlay {
        justify-content: flex-start;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: calc(76px + env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom));
    }

    body.page-home .mobile-overlay .mobile-legal,
    body.page-cases .mobile-overlay .mobile-legal {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 24px;
    }
}

@media (max-width: 768px) {
    /* Fallstudien: durchgehend echte Mobile-Breiten. */
    .page-cases .container {
        width: 100%;
        max-width: 100%;
        padding-inline: 18px;
    }

    .page-cases nav {
        width: 100%;
        max-width: 100%;
    }

    .page-cases nav .container {
        padding: 6px 6px 6px 16px;
    }

    .page-cases .hero {
        width: 100%;
        padding: 48px 0 42px;
        overflow-x: clip;
    }

    .page-cases .hero h1 {
        font-size: clamp(32px, 9vw, 42px);
        line-height: 1.08;
        letter-spacing: -0.035em;
    }

    .page-cases .hero p.sub {
        max-width: 560px;
        margin-bottom: 8px;
        font-size: 14.5px;
        line-height: 1.62;
    }

    .page-cases .stats-bar {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-cases .stats-bar > div {
        min-width: 0;
        padding: 22px 8px;
    }

    .page-cases .stats-bar .v {
        font-size: clamp(22px, 7vw, 30px);
        letter-spacing: -0.03em;
    }

    .page-cases .stats-bar .l {
        font-size: 9.5px;
        line-height: 1.35;
        letter-spacing: 0.05em;
        overflow-wrap: anywhere;
    }

    .page-cases .filter-section {
        width: 100%;
        padding: 38px 0 18px;
    }

    .page-cases .filter-panel {
        width: 100%;
        padding: 20px 16px;
        border-radius: 18px;
    }

    .page-cases .filter-group {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .page-cases .filter-bar {
        width: 100%;
        gap: 8px;
    }

    .page-cases .filter-pill {
        max-width: 100%;
        padding: 8px 12px;
        white-space: normal;
        text-align: left;
        line-height: 1.3;
    }

    .page-cases .cases-grid {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 26px 0 58px;
    }

    .page-cases .case-card {
        width: 100%;
        min-width: 0;
        border-radius: 18px;
    }

    .page-cases .case-body {
        min-width: 0;
        padding: 20px 18px;
    }

    .page-cases .case-kpis {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .page-cases .case-kpi,
    .page-cases .case-kpi .v,
    .page-cases .case-kpi .l {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .page-cases .case-kpi .v {
        font-size: 15px;
    }

    .page-cases .case-kpi .l {
        font-size: 9.5px;
        line-height: 1.3;
        letter-spacing: 0.04em;
    }

    .page-cases .case-btn {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        text-align: center;
        line-height: 1.3;
    }

    .page-cases .grevs {
        width: 100%;
        padding: 64px 0 70px;
        overflow-x: clip;
    }

    .page-cases .grevs-head {
        margin-bottom: 28px;
    }

    .page-cases .grevs [class*="elfsight-app"],
    .page-cases .grevs iframe {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    .page-cases .seo-text {
        width: 100%;
        padding: 58px 0;
        overflow-x: clip;
    }

    .page-cases .seo-panel {
        width: 100%;
        padding: 28px 20px;
        border-radius: 20px;
    }

    .page-cases .seo-text h2 {
        font-size: clamp(28px, 8vw, 38px);
    }

    .page-cases .seo-text p {
        font-size: 14.5px;
    }

    .page-cases .seo-points {
        gap: 7px;
    }

    .page-cases .seo-points span {
        max-width: 100%;
    }

    .page-cases .cta-block {
        width: 100%;
        padding: 64px 0 70px;
        overflow-x: clip;
    }

    .page-cases .cta-block h2 {
        font-size: clamp(30px, 8.4vw, 40px);
        line-height: 1.1;
        letter-spacing: -0.035em;
    }

    .page-cases .cta-block h2 br {
        display: none;
    }

    .page-cases .cta-block p {
        font-size: 15px;
        margin-bottom: 26px;
    }

    .page-cases .cta-row {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .page-cases .cta-row .btn-red,
    .page-cases .cta-row .btn-ghost {
        width: min(100%, 340px);
        max-width: 100%;
        justify-content: center;
        text-align: center;
        white-space: normal;
    }

    .page-cases footer {
        width: 100%;
        padding: 34px 0 30px;
    }

    .page-cases footer .links {
        gap: 10px 18px;
    }
}

@media (max-width: 420px) {
    .page-home .impact-stage {
        padding-top: 90px !important;
    }

    .page-home .impact-pairs {
        padding-inline: 12px !important;
    }

    .page-home .impact-pairs .pair {
        padding: 11px;
        border-radius: 18px;
    }

    .page-home .pair-card {
        padding: 14px 12px;
    }

    .page-cases .container {
        padding-inline: 14px;
    }

    .page-cases .filter-panel {
        padding: 18px 13px;
    }

    .page-cases .case-body {
        padding-inline: 16px;
    }
}

@media (hover: none) and (pointer: coarse) {
    .page-cases .case-card:hover {
        transform: none;
    }
}