body.mp-consulting {
    background-color: #0F172A;
    color: #F8FAFC;
    font-family: Inter, sans-serif;
}

@media (max-width: 767px) {
    body.mp-consulting #content > section:first-of-type {
        min-height: calc(100vh - var(--lp4-header-h));
        min-height: calc(100dvh - var(--lp4-header-h));
    }

    body.mp-consulting #kontakt {
        padding-left: 1rem;
        padding-right: 1rem;
        overflow-x: clip;
    }

    body.mp-consulting #kontakt .glass-card {
        width: min(720px, 100%);
        margin-left: auto;
        margin-right: auto;
        padding: 1.25rem 1rem 1.4rem;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    body.mp-consulting #kontakt .mp-help-form {
        overflow: visible;
        border-radius: 0;
    }
}

body.mp-consulting .is-signal-word {
    color: var(--lp4-gold-a);
}

body.mp-consulting #kontakt .mp-help-form {
    padding: 0;
    border: 0;
    background: transparent;
    min-width: 0;
    max-width: 100%;
    border-radius: 0;
    overflow: visible;
}

body.mp-consulting #kontakt .lp4-btn.mp-contact-submit {
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    overflow: visible;
}

body.mp-consulting #kontakt [data-i18n="contact.h2"],
body.mp-consulting #kontakt [data-i18n="contact.lead"] {
    text-align: left;
}

/* Tech-Grid Background */
        .bg-grid {
            background-size: 40px 40px;
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
            mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
            -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
        }

        /* Soft dot mesh for personas band */
        .bg-dots {
            background-image:
                radial-gradient(ellipse 70% 50% at 50% 0%, rgba(6, 182, 212, 0.10), transparent 60%),
                radial-gradient(rgba(148, 163, 184, 0.22) 1px, transparent 1px);
            background-size: auto, 28px 28px;
            background-position: center, 0 0;
            mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, black 35%, transparent 85%);
            -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, black 35%, transparent 85%);
        }

        /* Glassmorphism Classes */
        .glass-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, border-color 0.3s ease;
        }

        .glass-card:hover {
            transform: translateY(-5px);
            border-color: rgba(6, 182, 212, 0.4); /* Cyan glow on hover */
        }

        /* Gradient Text */
        .text-gradient {
            background: linear-gradient(90deg, #3B82F6, #06B6D4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .text-gradient .emoji-native {
            background: none;
            -webkit-background-clip: unset;
            background-clip: unset;
            -webkit-text-fill-color: initial;
            color: initial;
        }

        /* Scroll Animations (Fade-in up) */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        
        .animate-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Upcoming block: faint at the top, clearer further down, readable after scroll */
        [data-scroll-tease] {
            --tease: 0;
            position: relative;
        }

        [data-scroll-tease]::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            background: linear-gradient(
                to bottom,
                rgba(30, 41, 59, 0.82) 0%,
                rgba(30, 41, 59, 0.5) 28%,
                rgba(30, 41, 59, 0.16) 68%,
                rgba(30, 41, 59, 0.04) 100%
            );
            opacity: calc(1 - var(--tease));
        }

        @media (prefers-reduced-motion: reduce) {
            .animate-on-scroll {
                opacity: 1;
                transform: none;
                transition: none;
            }

            .hero-scroll-hint,
            .hero-scroll-hint svg,
            .hero-scroll-hint-i,
            .hero-scroll-hint-stack {
                animation: none;
            }

            [data-scroll-tease]::after {
                content: none;
            }
        }

        .hero-scroll-section {
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }

        .hero-scroll-hint {
            position: relative;
            z-index: 10;
            flex: 1 1 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 4.5rem;
            color: rgba(6, 182, 212, 0.55);
            text-decoration: none;
            line-height: 0;
        }

        .hero-scroll-hint svg,
        .hero-scroll-hint-i {
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            display: block;
        }

        .hero-scroll-hint-stack {
            display: flex;
            flex-direction: column;
            align-items: center;
            animation: hero-scroll-wave 4.6s ease-in-out infinite;
        }

        .hero-scroll-hint-i {
            animation: none;
        }

        .hero-scroll-hint-i1 {
            width: 1.65rem;
            height: 0.95rem;
            margin-bottom: -0.12rem;
            opacity: 0.35;
        }

        .hero-scroll-hint-i2 {
            width: 2.55rem;
            height: 1.45rem;
            margin-bottom: -0.14rem;
            opacity: 0.6;
        }

        .hero-scroll-hint-i3 {
            width: 3.7rem;
            height: 2.1rem;
            opacity: 0.85;
        }

        .hero-scroll-hint:hover,
        .hero-scroll-hint:focus-visible {
            color: #06B6D4;
        }

        #prov {
            scroll-margin-top: calc(var(--lp4-header-h, 4rem) + 0.5rem);
        }

        @keyframes hero-scroll-wave {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(3px); }
        }

        .img-popup {
            position: relative;
            cursor: zoom-in;
        }

        .img-popup img {
            display: block;
            width: 100%;
            height: auto;
        }

        .img-lightbox {
            position: fixed;
            inset: 0;
            z-index: 80;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            background: rgba(15, 23, 42, 0.82);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.25s ease, visibility 0.25s ease;
        }

        .img-lightbox.is-open {
            opacity: 1;
            visibility: visible;
        }

        .img-lightbox img {
            max-width: min(92vw, 1400px);
            max-height: 90vh;
            width: auto;
            height: auto;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
            transform: scale(0.94);
            transition: transform 0.3s ease;
        }

        .img-lightbox.is-open img {
            transform: scale(1);
        }

        /* Tech-Stack: Chips & stufenweises Aufklappen */
        .tech-chip {
            display: inline-block;
            padding: 0.25rem 0.65rem;
            margin: 0.15rem 0.15rem 0.15rem 0;
            border-radius: 9999px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: #CBD5E1;
            font-size: 0.8125rem;
            line-height: 1.4;
            white-space: nowrap;
        }

        .tech-chip-hot {
            background: rgba(6, 182, 212, 0.12);
            border-color: rgba(6, 182, 212, 0.35);
            color: #E2F6FA;
        }

        .tech-group-title {
            color: #94A3B8;
            font-size: 0.6875rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            margin-bottom: 0.4rem;
        }

        .tech-panel[hidden] {
            display: none;
        }

        .tech-panel {
            animation: techFade 0.45s ease-out both;
        }

        @keyframes techFade {
            from { opacity: 0; transform: translateY(12px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .tech-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.7rem 1.15rem;
            border-radius: 0.75rem;
            font-weight: 600;
            font-size: 0.9375rem;
            border: 1px solid rgba(6, 182, 212, 0.35);
            background: rgba(6, 182, 212, 0.08);
            color: #67E8F9;
            transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
        }

        .tech-btn[hidden] {
            display: none;
        }

        .tech-btn:hover {
            background: rgba(6, 182, 212, 0.16);
            border-color: rgba(6, 182, 212, 0.6);
            transform: translateY(-2px);
        }

        .tech-btn-warn {
            border-color: rgba(248, 113, 113, 0.35);
            background: rgba(248, 113, 113, 0.08);
            color: #FCA5A5;
        }

        .tech-btn-warn:hover {
            background: rgba(248, 113, 113, 0.16);
            border-color: rgba(248, 113, 113, 0.6);
        }

        /* Die Karte darf beim Aufklappen nicht mitwackeln */
        #tech-stack-card:hover {
            transform: none;
        }

        /* Testimonials: kein Hover-Lift (nicht klickbar, Karussell sonst zittert) */
        .glass-card.no-lift:hover {
            transform: none;
        }

        .testimonial-stars {
            display: inline-block;
            font-size: 1.35rem;
            letter-spacing: 0.12em;
            line-height: 1;
            color: #22d3ee;
        }

        .testimonial-stars .star-off {
            color: rgba(148, 163, 184, 0.45);
        }

        wistia-player[media-id='qsapqtswd1']:not(:defined) {
            background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/qsapqtswd1/swatch');
            display: block;
            filter: blur(5px);
            padding-top: 56.25%;
        }

        wistia-player {
            display: block;
            width: 100%;
        }

        .testimonial-scroller {
            display: flex;
            gap: 1.5rem;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            overscroll-behavior-x: contain;
            scrollbar-width: thin;
            padding-bottom: 0.35rem;
            -webkit-overflow-scrolling: touch;
        }

        .testimonial-scroller > article {
            flex: 0 0 85%;
            max-width: 22rem;
            scroll-snap-align: start;
        }

        @media (min-width: 768px) {
            .testimonial-scroller > article {
                flex-basis: calc((100% - 1.5rem) / 2);
                max-width: none;
            }
        }

        @media (min-width: 1024px) {
            .testimonial-scroller > article {
                flex-basis: calc((100% - 3rem) / 3);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .testimonial-scroller {
                scroll-snap-type: none;
            }
        }

@media (min-width: 768px) {
    .mp-consulting-about-photo {
        object-position: center top;
    }
}