/* ============================================================
   MOBILE FIXES – ROUND 2
   Loaded AFTER mobile-fixes.css to override where needed.
   Scope: ≤ 768px (tablet & mobile). All rules are mobile-only.
   ============================================================ */

@media (max-width: 768px) {

    /* ============================================================
       INDEX – FULLBG SECTION
       1. Top spacing matches the (smaller) bottom spacing
       2. More animation / visual interest (Ken Burns, glow, shimmer)
       ============================================================ */

    /* Reduce the top gap on mobile so it equals the bottom rhythm */
    .hero-fullbg-gap {
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: none !important;
    }

    /* Make the fullbg section visually more engaging on mobile */
    .fullbg-section {
        position: relative;
        overflow: hidden;
        min-height: 70vh;
    }

    /* Subtle Ken Burns zoom on the background image */
    .fullbg-section .fullbg-image {
        animation: fullbgKenBurns 18s ease-in-out infinite alternate;
        will-change: transform;
    }
    @keyframes fullbgKenBurns {
        0%   { transform: scale(1.05) translate(0, 0); }
        100% { transform: scale(1.18) translate(-2%, -2%); }
    }

    /* Animated gradient sheen on the overlay so it doesn't feel static */
    .fullbg-section .fullbg-overlay {
        background: linear-gradient(
            135deg,
            rgba(13, 27, 53, 0.85) 0%,
            rgba(27, 50, 96, 0.78) 35%,
            rgba(13, 27, 53, 0.88) 70%,
            rgba(27, 50, 96, 0.82) 100%
        ) !important;
        background-size: 200% 200%;
        animation: fullbgGradient 12s ease-in-out infinite;
    }
    @keyframes fullbgGradient {
        0%   { background-position: 0%   50%; }
        50%  { background-position: 100% 50%; }
        100% { background-position: 0%   50%; }
    }

    /* Gold shimmer that sweeps across the section, on top of the overlay */
    .fullbg-section::after {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 50%;
        height: 100%;
        background: linear-gradient(
            115deg,
            transparent 0%,
            rgba(212, 165, 116, 0.08) 45%,
            rgba(212, 165, 116, 0.18) 50%,
            rgba(212, 165, 116, 0.08) 55%,
            transparent 100%
        );
        transform: skewX(-12deg);
        animation: fullbgShimmer 7s ease-in-out infinite;
        pointer-events: none;
        z-index: 1;
    }
    @keyframes fullbgShimmer {
        0%   { left: -60%; opacity: 0; }
        20%  { opacity: 1; }
        80%  { opacity: 1; }
        100% { left: 160%; opacity: 0; }
    }

    /* Subtle accent line that pulses under the headline */
    .fullbg-section .fullbg-content h2 {
        position: relative;
        animation: fullbgHeadlineFade 1s ease-out 0.1s both;
    }
    .fullbg-section .fullbg-content h2::after {
        content: "";
        display: block;
        width: 48px;
        height: 3px;
        margin: 1rem auto 0;
        background: linear-gradient(90deg, #D4A574, #B8935A);
        border-radius: 2px;
        animation: fullbgAccentGrow 1.4s cubic-bezier(.22,.61,.36,1) 0.2s both,
                   fullbgAccentPulse 3.4s ease-in-out 1.6s infinite;
        transform-origin: center;
    }
    @keyframes fullbgHeadlineFade {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fullbgAccentGrow {
        from { width: 0; opacity: 0; }
        to   { width: 48px; opacity: 1; }
    }
    @keyframes fullbgAccentPulse {
        0%, 100% { transform: scaleX(1);   opacity: 1;    box-shadow: 0 0 0 rgba(212,165,116,0); }
        50%      { transform: scaleX(1.4); opacity: 0.85; box-shadow: 0 0 18px rgba(212,165,116,0.55); }
    }

    /* Keep content above the shimmer pseudo-element */
    .fullbg-section .fullbg-content {
        position: relative;
        z-index: 2;
    }

    /* Soft entrance for the paragraph and buttons */
    .fullbg-section .fullbg-content p {
        animation: fullbgHeadlineFade 1s ease-out 0.35s both;
    }
    .fullbg-section .fullbg-buttons {
        animation: fullbgHeadlineFade 1s ease-out 0.55s both;
    }

    /* ============================================================
       INDEX – WARUM LEGANT
       Center the intro paragraph (only the one directly under the H2)
       Keep the warum-points text left-aligned for readability
       ============================================================ */
    .about .about-content > p {
        text-align: center;
        /* Balance line lengths so the last line isn't visually off-center */
        text-wrap: balance;
        -webkit-text-wrap: balance;
        /* Constrain width so lines wrap more uniformly */
        max-width: 30ch;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        /* Make sure no inherited indent throws it off */
        text-indent: 0 !important;
    }
    /* Belt-and-suspenders: explicitly keep nested point paragraphs left-aligned */
    .about .warum-point p,
    .about .warum-point h4 {
        text-align: left;
    }

    /* ============================================================
       SERVICE PAGES – VORTEILE SECTION
       (webdesign / seo-optimierung / ki-chatbot)
       1. Force single-column grid so cards no longer overflow right
       2. Tighter padding/gap so icons + text fit nicely on phones
       3. Keep the visual distinction from the first section:
          - left gold border preserved
          - circle gradient icon preserved
          - just shrunk and re-flowed for mobile
       ============================================================ */
    .vorteile-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        margin-bottom: 2rem !important;
    }

    .vorteile-grid > div {
        /* Inline styles on the cards win normally — but our overrides need !important */
        padding: 1.25rem 1.25rem !important;
        gap: 1rem !important;
        align-items: center !important;
        border-radius: 12px !important;
    }

    /* The icon circle: smaller on mobile, still visually a "gold pill" */
    .vorteile-grid > div > div:first-child {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
    }

    .vorteile-grid > div h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.3rem !important;
        line-height: 1.25;
    }
    .vorteile-grid > div p {
        font-size: 0.93rem !important;
        line-height: 1.55 !important;
    }

    /* Single Beratung button: full width and properly spaced */
    .vorteile-cta {
        margin-top: 0.5rem;
    }
    .vorteile-cta .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    /* ============================================================
       SERVICE PAGES – KI-CHATBOT
       Force features + process grids (which have inline 3-col / 4-col)
       to collapse to one column on mobile, matching webdesign behaviour
       ============================================================ */
    .feature-grid[style*="repeat(3,1fr)"],
    .feature-grid[style*="repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .process-steps[style*="repeat(4,1fr)"],
    .process-steps[style*="repeat(4, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* ============================================================
       SCROLL-TO-TOP BUTTON (#lg-back-to-top, injected by script.js)
       Move from bottom-right to bottom-left so it doesn't collide
       with the chatbot widget (which lives bottom-right).
       The JS injects its CSS without !important, so our !important wins.
       ============================================================ */
    #lg-back-to-top {
        left: 1.25rem !important;
        right: auto !important;
        bottom: 1.25rem !important;
    }
}