/**
 * Hanssen Agency – Mobile & Responsive Layout
 *
 * Clean mobile-first overrides based on Figma design reference.
 * Breakpoints: ≤767px (phone), 768–1024px (tablet), ≥1025px (desktop)
 * Colors/fonts inherited from style.css CSS variables.
 *
 * Design principles from Figma reference:
 *  - Single-column stacked layout on mobile
 *  - Large readable hero text with tight line-height
 *  - Hamburger overlay nav (full-screen dark panel)
 *  - Floating red CTA button bottom-right
 *  - Cards full-width, generous padding
 *  - Section spacing compact (~2rem) vs desktop (~4rem)
 */

/* ================================================
   1. RESET BROKEN LEGACY RULES
   ================================================ */

/* The @media(min-width:320px) block in style.css forced
   .main-navigation ul to display:flex row on ALL widths.
   We restore sane defaults here (loaded after). */

@media (max-width: 767px) {
    /* Kill the legacy min-width:320px overrides for nav */
    .main-navigation ul {
        display: none !important;
        flex-direction: column !important;
        position: fixed !important;
        inset: 0 !important;
        top: clamp(55px, 8vw, 75px) !important;
        background: rgba(10, 10, 10, 0.98) !important;
        z-index: 1001 !important;
        padding: 2rem 1.5rem !important;
        gap: 0.5rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        align-items: flex-start !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 2px solid var(--color-vibrant-red) !important;
    }

    .main-navigation ul.active {
        display: flex !important;
    }

    .main-navigation ul li {
        width: 100% !important;
    }

    .main-navigation ul a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        padding: 1rem 1.25rem !important;
        font-size: clamp(1rem, 4vw, 1.2rem) !important;
        font-family: var(--font-heading) !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        color: var(--color-white) !important;
        background: rgba(255,255,255,0.04) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        min-height: 52px !important;
        transition: background 0.2s ease, color 0.2s ease !important;
    }

    .main-navigation ul a:hover,
    .main-navigation ul a:focus-visible {
        background: var(--color-vibrant-red) !important;
        color: var(--color-white) !important;
        border-color: var(--color-vibrant-red) !important;
    }
}

/* ================================================
   2. MOBILE HEADER
   ================================================ */

@media (max-width: 767px) {
    .site-header {
        padding: 0 !important;
        height: clamp(55px, 8vw, 70px) !important;
    }

    .site-header .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 100% !important;
        padding: 0 1rem !important;
        gap: 0.75rem !important;
    }

    /* Logo area */
    .site-branding {
        flex: 1 1 auto !important;
        gap: 2px !important;
        min-width: 0 !important;
    }

    .site-logo-svg {
        width: clamp(120px, 35vw, 180px) !important;
        height: auto !important;
    }

    .site-logo-img {
        max-width: clamp(100px, 30vw, 160px) !important;
        height: auto !important;
    }

    .site-slogan {
        font-size: clamp(0.65rem, 2.5vw, 0.8rem) !important;
        opacity: 0.75 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: calc(100vw - 140px) !important;
    }

    /* Hamburger button */
    .mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        background: rgba(255,255,255,0.06) !important;
        border: 1px solid rgba(255,255,255,0.15) !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        order: 3 !important;
    }

    .hamburger-line {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        background: var(--color-white) !important;
        border-radius: 2px !important;
        transition: transform 0.25s ease, opacity 0.25s ease !important;
    }

    .mobile-menu-toggle .hamburger-line + .hamburger-line {
        margin-top: 5px !important;
    }

    .mobile-menu-toggle.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px) !important;
    }
    .mobile-menu-toggle.active .hamburger-line:nth-child(2) {
        opacity: 0 !important;
    }
    .mobile-menu-toggle.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px) !important;
    }

    /* Hide desktop header CTA */
    .header-cta {
        display: none !important;
    }

    /* Nav container needs relative positioning */
    .main-navigation {
        position: static !important;
    }
}

/* ================================================
   3. HERO SECTION – MOBILE
   ================================================ */

@media (max-width: 767px) {
    .hero-section {
        min-height: clamp(320px, 55vw, 480px) !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
    }

    .hero-section .container {
        position: relative !important;
        z-index: 2 !important;
        padding: 1.5rem 1.25rem !important;
        width: 100% !important;
    }

    .hero-headline,
    .hero-title,
    .hero-section h1 {
        font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
        line-height: 1.15 !important;
        margin-bottom: 0.75rem !important;
        max-width: 100% !important;
        word-break: normal !important;
    }

    .hero-intro,
    .hero-subtitle,
    .hero-section p {
        font-size: clamp(0.9rem, 3.5vw, 1.1rem) !important;
        line-height: 1.55 !important;
        max-width: 100% !important;
        margin-bottom: 1.25rem !important;
    }

    .hero-cta {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    .hero-cta .btn {
        width: 100% !important;
        text-align: center !important;
        padding: 0.875rem 1.25rem !important;
        font-size: 0.875rem !important;
        min-height: 48px !important;
    }

    /* Hero media: full bleed, darker overlay on mobile */
    .hero-media {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
    }

    .hero-media img,
    .hero-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .hero-background {
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        background: linear-gradient(
            to bottom,
            rgba(10,10,10,0.55) 0%,
            rgba(10,10,10,0.35) 40%,
            rgba(10,10,10,0.75) 100%
        ) !important;
    }

    .section-divider {
        margin: 1rem 0 0 !important;
    }
}

/* ================================================
   4. FLOATING MOBILE CTA
   ================================================ */

@media (max-width: 767px) {
    .mobile-cta {
        display: inline-flex !important;
        position: fixed !important;
        right: calc(1rem + env(safe-area-inset-right)) !important;
        bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
        z-index: 1000 !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 56px !important;
        height: 56px !important;
        padding: 0 1.25rem !important;
        border-radius: 999px !important;
        background: var(--color-vibrant-red) !important;
        color: #fff !important;
        font-family: var(--font-heading) !important;
        font-weight: 700 !important;
        font-size: 0.8rem !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        box-shadow: 0 6px 20px rgba(230,57,70,0.5) !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }

    .mobile-cta:hover,
    .mobile-cta:focus-visible {
        transform: translateY(-2px) !important;
        box-shadow: 0 10px 26px rgba(230,57,70,0.6) !important;
        outline: none !important;
    }
}

@media (min-width: 768px) {
    .mobile-cta {
        display: none !important;
    }
}

/* ================================================
   5. BODY PADDING (account for fixed header)
   ================================================ */

@media (max-width: 767px) {
    body {
        padding-top: calc(clamp(55px, 8vw, 70px) + env(safe-area-inset-top)) !important;
    }

    .site-main {
        padding-top: 0 !important;
    }
}

/* ================================================
   6. SECTION SPACING – MOBILE
   ================================================ */

@media (max-width: 767px) {
    section,
    .about-section,
    .vision-section,
    .intro-rich-text,
    .services-section,
    .references-section,
    .contact-section,
    .blog-section {
        padding: 2rem 0 !important;
    }

    .container {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    h2,
    .section-title {
        font-size: clamp(1.4rem, 5.5vw, 2rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }

    h3 {
        font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
    }

    p, li {
        font-size: clamp(0.9rem, 3.5vw, 1.05rem) !important;
        line-height: 1.65 !important;
    }
}

/* ================================================
   7. USP / CARDS GRID – MOBILE
   ================================================ */

@media (max-width: 767px) {
    .usps,
    .usp-grid,
    .services-grid,
    .portfolio-grid,
    .references-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .usp-item,
    .service-card,
    .cinematic-card {
        padding: 1.25rem !important;
        border-radius: 10px !important;
    }

    .usp-item h3 {
        font-size: clamp(1rem, 4vw, 1.25rem) !important;
        margin-bottom: 0.4rem !important;
    }

    .usp-item p {
        font-size: clamp(0.875rem, 3vw, 1rem) !important;
        margin: 0 !important;
    }
}

/* ================================================
   8. SERVICES PAGE – MOBILE
   ================================================ */

@media (max-width: 767px) {
    .service-category {
        padding: 1.25rem !important;
    }

    .service-icon {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 0.75rem !important;
    }

    .service-category h3 {
        font-size: clamp(1rem, 4vw, 1.2rem) !important;
    }

    /* Agentic AI card spacing */
    #agentic-ai-services {
        padding: 1.5rem 1.25rem !important;
    }
}

/* ================================================
   9. REFERENZEN SWIPER – MOBILE
   ================================================ */

@media (max-width: 767px) {
    .references-carousel .swiper-slide {
        width: 100% !important;
    }

    .reference-item {
        padding: 1.5rem 1.25rem !important;
        min-height: 0 !important;
    }

    .reference-item img,
    .reference-thumbnail {
        width: 100% !important;
        max-height: 200px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        margin-bottom: 1rem !important;
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 36px !important;
        height: 36px !important;
    }

    .swiper-pagination {
        bottom: 0.5rem !important;
    }
}

/* ================================================
   10. BLOG GRID – MOBILE
   ================================================ */

@media (max-width: 767px) {
    .blog-grid,
    .posts-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
    }

    .blog-card,
    .post-card {
        width: 100% !important;
    }

    .blog-card img,
    .post-thumbnail img {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
    }
}

/* ================================================
   11. CONTACT FORM – MOBILE
   ================================================ */

@media (max-width: 767px) {
    .contact-section .container,
    .page-kontakt .container {
        padding: 0 1.25rem !important;
    }

    .contact-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    form input,
    form textarea,
    form select {
        font-size: 16px !important; /* prevent iOS auto-zoom */
        padding: 0.875rem 1rem !important;
        border-radius: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    form textarea {
        min-height: 120px !important;
    }

    form .btn,
    form button[type="submit"] {
        width: 100% !important;
        min-height: 52px !important;
        font-size: 1rem !important;
    }
}

/* ================================================
   12. FOOTER – MOBILE
   ================================================ */

@media (max-width: 767px) {
    .footer-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        text-align: left !important;
    }

    .footer-col {
        width: 100% !important;
    }

    .footer-logo-area {
        margin-bottom: 0.5rem !important;
    }

    .social-links {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        justify-content: flex-start !important;
    }

    .footer-legal-line {
        flex-direction: column !important;
        gap: 0.5rem !important;
        align-items: flex-start !important;
        font-size: 0.8rem !important;
    }

    .footer-legal-line .legal-links {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
}

/* ================================================
   13. TABLET (768px–1024px)
   ================================================ */

@media (min-width: 768px) and (max-width: 1024px) {
    .site-header .container {
        padding: 0 1.5rem !important;
    }

    /* On tablet, show nav inline — no hamburger needed */
    .mobile-menu-toggle {
        display: none !important;
    }

    .main-navigation ul {
        display: flex !important;
        position: static !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }

    .main-navigation ul a {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.6rem !important;
    }

    .hero-headline,
    .hero-title {
        font-size: clamp(2rem, 5vw, 3rem) !important;
    }

    .usps,
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ================================================
   14. DESKTOP REFINEMENTS (≥1025px)
   ================================================ */

@media (min-width: 1025px) {
    /* Ensure hamburger is completely gone on desktop */
    .mobile-menu-toggle {
        display: none !important;
    }

    .mobile-cta {
        display: none !important;
    }

    /* Hero: Figma-inspired — left-aligned large headline, 40-50% screen height */
    .hero-section {
        min-height: clamp(400px, 45vh, 580px) !important;
        display: flex !important;
        align-items: flex-end !important;
    }

    .hero-section .container {
        padding-bottom: 3rem !important;
    }

    .hero-headline {
        font-size: clamp(2.5rem, 4.5vw, 4.5rem) !important;
        line-height: 1.08 !important;
        max-width: 70% !important;
    }

    .hero-intro {
        max-width: 55% !important;
        font-size: clamp(1rem, 1.5vw, 1.2rem) !important;
    }

    .hero-cta {
        flex-direction: row !important;
        gap: 1rem !important;
        align-items: center !important;
    }

    /* USPs: 4-col on large desktop */
    .usps {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Services grid: 3-col */
    .services-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ================================================
   15. SECTION BACKGROUNDS & RHYTHM (ALL SIZES)
   ================================================ */

/* intro-rich-text has no class background — give it a clear mid-tone */
.intro-rich-text {
    background: var(--color-section-alt, #212529);
    padding: 3.5rem 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Ensure all section backgrounds use correct color scheme */
.about-section {
    background: var(--color-section-bg, #23262A) !important;
}

.vision-section {
    background: var(--color-graphite-bg, #1A1A1A) !important;
}

/* Prose text: light-gray on dark section bg */
.intro-rich-text p,
.intro-rich-text li,
.prose p,
.prose li {
    color: var(--color-light-gray, #C8CDD2);
}

/* USP item: heading legible on dark card */
.usp-item h3 {
    color: var(--color-light-gray, #C8CDD2) !important;
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.usp-item p {
    color: var(--color-light-gray, #C8CDD2) !important;
    font-size: clamp(0.875rem, 2vw, 0.95rem);
    margin: 0;
    line-height: 1.55;
}

/* Section title: mid-gray, uppercase */
.section-title {
    color: var(--color-mid-gray, #AAB0B6) !important;
}

/* Ensure body-level paragraph color is legible */
.about-section p,
.vision-section p,
.wir-section p,
.services-section p {
    color: var(--color-light-gray, #C8CDD2);
}

/* ================================================
   16. MOBILE HERO LAYOUT POLISH
   ================================================ */

@media (max-width: 767px) {
    /* 3-button row: primary full-width, secondary + tertiary side by side */
    .hero-cta {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
        width: 100% !important;
    }

    .hero-cta .btn-primary {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 0.9rem !important;
        padding: 0.9rem 1rem !important;
        min-height: 50px !important;
    }

    .hero-cta .btn-secondary,
    .hero-cta .btn-tertiary {
        width: 100% !important;
        text-align: center !important;
        font-size: 0.8rem !important;
        padding: 0.75rem 0.75rem !important;
        min-height: 44px !important;
    }

    /* If there are exactly 3 buttons, put 2nd and 3rd side by side */
    .hero-cta .btn:nth-child(2),
    .hero-cta .btn:nth-child(3) {
        grid-column: auto !important;
    }

    .hero-cta {
        grid-template-columns: 1fr 1fr !important;
    }

    .hero-cta .btn:first-child {
        grid-column: 1 / -1 !important;
    }
}

/* ================================================
   17. PARALLAX DISABLE ON MOBILE
   ================================================ */

/* Parallax via JS transform creates jank on mobile — disable it */
@media (max-width: 767px) {
    .parallax-bg {
        background-attachment: scroll !important;
    }
    /* Prevent the JS cinematic-animations.js parallax from affecting hero on mobile */
    .hero-section.parallax-bg,
    .parallax-bg .hero-media {
        transform: none !important;
        will-change: auto !important;
    }
}

/* ================================================
   16. VISION / ABOUT SECTION SPACING
   ================================================ */

@media (max-width: 767px) {
    .vision-section {
        padding: 2rem 0 !important;
    }

    .about-section {
        padding: 2rem 0 !important;
    }

    .intro-rich-text {
        padding: 1.5rem 0 !important;
    }
}

/* ================================================
   17. HEADER TRANSITION FIX
   ================================================ */

/* Ensure hide-on-scroll CSS transition is smooth on desktop,
   but on mobile the header never gets transformed away */
.site-header {
    transition: transform 0.3s ease, background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease !important;
}

@media (max-width: 767px) {
    .site-header {
        transform: translateY(0) !important;
    }
}

/* ================================================
   18. ACCESSIBILITY & REDUCED MOTION
   ================================================ */

@media (prefers-reduced-motion: reduce) {
    .mobile-cta,
    .mobile-menu-toggle,
    .main-navigation ul,
    .main-navigation ul a {
        transition: none !important;
        animation: none !important;
    }
}

/* Safe area support (iPhone notch/island) */
@supports (padding-top: env(safe-area-inset-top)) {
    @media (max-width: 767px) {
        .main-navigation ul.active {
            padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ================================================
   19. KILL WORDPRESS BLOCK LIBRARY WHITE BACKGROUNDS
   ================================================ */

/* WP block-library/style.min.css injects white backgrounds on
   wp-block-navigation containers. Override all of them. */

.wp-block-navigation,
.wp-block-navigation__container,
.wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__submenu-container,
.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--color-graphite-bg, #1A1A1A) !important;
    color: var(--color-light-gray, #C8CDD2) !important;
}

/* Any block with explicit white/light background class */
.has-white-background-color,
.has-background.has-white-background-color {
    background-color: var(--color-section-bg, #23262A) !important;
}

.has-light-gray-background-color,
.has-pale-cyan-blue-background-color,
.has-pale-pink-background-color {
    background-color: var(--color-section-alt, #212529) !important;
}

/* WP block separators / hr that default to black */
.wp-block-separator,
hr {
    border-color: rgba(230, 57, 70, 0.2) !important;
    background: transparent !important;
}

/* Gutenberg paragraph & heading color overrides */
.wp-block-paragraph,
.wp-block-heading,
.wp-block-list {
    color: var(--color-light-gray, #C8CDD2);
}

/* ================================================
   20. NAVIGATION UX IMPROVEMENTS
   ================================================ */

/* ── Desktop: cleaner hover & active state ── */
@media (min-width: 768px) {
    /* Nav links: smooth color transition */
    .main-navigation a {
        transition: color 0.2s ease !important;
        position: relative;
    }

    /* Underline slide from left on hover */
    .main-navigation a::after {
        content: '' !important;
        position: absolute !important;
        bottom: -3px !important;
        left: 0 !important;
        height: 2px !important;
        width: 0 !important;
        background: var(--color-vibrant-red, #E63946) !important;
        transition: width 0.25s ease !important;
    }

    .main-navigation a:hover::after {
        width: 100% !important;
    }

    /* Current page: red label + persistent underline */
    .main-navigation .current-menu-item > a,
    .main-navigation .current_page_item > a {
        color: var(--color-vibrant-red, #E63946) !important;
    }

    .main-navigation .current-menu-item > a::after,
    .main-navigation .current_page_item > a::after {
        width: 100% !important;
        background: var(--color-vibrant-red, #E63946) !important;
    }

    /* Header CTA button: always visible, never hidden */
    .header-cta {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }
}

/* ── Mobile overlay: polish & UX ── */
@media (max-width: 767px) {
    /* Each nav link gets a subtle bottom border as visual separator */
    .main-navigation ul.active li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .main-navigation ul.active li:last-child {
        border-bottom: none !important;
    }

    /* Current page in mobile menu: red left accent bar */
    .main-navigation .current-menu-item > a,
    .main-navigation .current_page_item > a {
        color: var(--color-vibrant-red, #E63946) !important;
        border-left: 3px solid var(--color-vibrant-red, #E63946) !important;
        padding-left: calc(1.25rem - 3px) !important;
    }

    /* Menu open: add a faint red glow to top border */
    .main-navigation ul.active {
        box-shadow: 0 4px 40px rgba(230, 57, 70, 0.12) !important;
    }

    /* Mobile nav close affordance: show X state on hamburger */
    .mobile-menu-toggle.active .hamburger-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.active .hamburger-line:nth-child(2) {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }

    .mobile-menu-toggle.active .hamburger-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }

    /* Hide header CTA on very small screens to avoid crowding */
    .header-cta {
        display: none !important;
    }

    /* But show mobile-cta floating button instead */
    .mobile-cta {
        display: flex !important;
    }
}

/* ── Tablet: show header CTA, hide mobile-cta ── */
@media (min-width: 768px) {
    .mobile-cta {
        display: none !important;
    }
}

/* ================================================
   18. SUBPAGE POLISH – MOBILE
   ================================================ */

@media (max-width: 767px) {
    /* Section CTA: full-width button on mobile */
    .section-cta,
    .wir-cta {
        text-align: center !important;
        margin-top: 2rem !important;
    }

    .section-cta .btn,
    .wir-cta .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Contact info: better spacing below form */
    .contact-info {
        padding-top: 1.5rem !important;
        border-top: 1px solid rgba(255,255,255,0.08) !important;
    }

    .contact-details li,
    .locations li {
        font-size: 0.9rem !important;
        padding: 0.6rem 0 !important;
    }

    /* Service cards: stack CTA buttons on mobile */
    .service-cta {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.6rem !important;
        margin-top: 1rem !important;
    }

    .service-cta .btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Referenzen: hide the reel details panel on mobile (too small) */
    .references-reel-ui {
        display: none !important;
    }

    .references-carousel {
        padding-bottom: 2.5rem !important;
    }

    /* Wir page: prose padding */
    .wir-section .prose {
        padding: 0 !important;
    }

    /* Leistungen: service icon smaller on mobile */
    .service-icon-img {
        width: 56px !important;
        height: 56px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }
}