/* ============================================================
   landing.css — Maikie Landing Page (maikie.de)
   Load-Order: fonts.css → design-tokens.css → shop-layout.css
               → figma-overrides.css → landing.css
   Zentralisiert auf shop.maikie.de — nie direkt in index.php editieren.
   ============================================================ */

/* ============================================
           HERO - Split Layout
           ============================================ */
        .hero {
            background: var(--sand);
            min-height: 520px;
            display: flex;
            margin-top: 120px;
        }

        .hero-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            width: 100%;
            
            margin: 0 auto;
        }

        .hero-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: var(--sp-8) var(--sp-gutter);
            max-width: 640px;
            margin-left: auto;
        }

        .hero-eyebrow {
            font-family: var(--font-mono);
            font-size: 0.88rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: var(--sp-3);
        }

        .hero-title {
            font-family: var(--font-display);
            font-size: clamp(3rem, 6vw, 5.5rem);
            font-weight: 300;
            line-height: 1.05;
            color: #F0F2F7;
            margin-bottom: var(--sp-3);
        }

        .hero-title em {
            font-style: italic;
            color: var(--accent);
        }

        .hero-description {
            font-family: var(--font-body);
            font-size: 1.05rem;
            line-height: 1.6;
            color: #9AA3B8;
            margin-bottom: var(--sp-4);
            max-width: 480px;
        }

        .hero-cta {
            display: inline-block;
            padding: 0.85rem 1.8rem;
            background: var(--accent);
            color: #fff;
            font-family: "DM Sans", sans-serif;
            font-size: 1.01rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            border: none;
            border-radius: 0;
            transition: background 0.25s, transform 0.25s;
            align-self: flex-start;
        }

        .hero-cta:hover {
            background: var(--accent);
            transform: translateY(-1px);
        }

        .hero-image {
            position: relative;
            overflow: hidden;
        }

        .hero-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .hero-image-placeholder {
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255,255,255,0.1);
            font-size: 4rem;
        }

        /* ============================================
           USP BAR
           ============================================ */
        .usp-bar {
            background: #ffffff;
            padding: var(--sp-4) 0;
            border-bottom: 1px solid var(--border);
        }

        .usp-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--sp-3);
        }

        .usp-item {
            display: flex;
            align-items: flex-start;
            gap: var(--sp-2);
            padding: 0 var(--sp-2);
        }

        .usp-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,200,240,0.06);
            color: var(--accent2);
            font-size: 1.3rem;
            flex-shrink: 0;
        }

        .usp-text h4 {
            font-family: var(--font-body);
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-strong);
            margin-bottom: 2px;
        }

        .usp-text p {
            font-size: 0.82rem;
            color: var(--muted);
        }

        /* ============================================
           TRUST BAR
           ============================================ */
        .trust-bar {
            background: var(--sand);
            color: #9AA3B8;
            padding: 0.7rem 0;
            font-family: var(--font-mono);
            font-size: 0.72rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            text-align: center;
        }

        .trust-bar span { color: var(--accent); }

        /* ============================================
           PROMO BANNERS (2 nebeneinander)
           ============================================ */
        .banner-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--sp-3);
            margin: var(--sp-5) auto;
            max-width: 1280px;
            padding: 0 var(--sp-3);
        }

        .banner-card {
            position: relative;
            min-height: 340px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: var(--sp-4);
            color: #ffffff;
        }

        .banner-card-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            z-index: 0;
        }

        .banner-card-bg::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(15,31,46,0.85) 0%, rgba(15,31,46,0.4) 50%, rgba(15,31,46,0.1) 100%);
        }

        .banner-card-content {
            position: relative;
            z-index: 1;
        }

        .banner-card-label {
            font-family: var(--font-mono);
            font-size: 0.72rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: var(--sp-1);
        }

        .banner-card-title {
            font-family: var(--font-display);
            font-size: 2rem;
            font-weight: 300;
            line-height: 1.15;
            color: #ffffff;
            margin-bottom: var(--sp-2);
        }

        .banner-card-btn {
            display: inline-flex;
            align-items: center;
            gap: var(--sp-1);
            padding: 0.85rem 1.8rem;
            background: var(--accent);
            color: #fff;
            font-family: "DM Sans", sans-serif;
            font-size: 1.01rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            border: none;
            border-radius: 0;
            transition: background 0.25s, transform 0.25s;
        }

        .banner-card-btn:hover {
            background: var(--accent); transform: translateY(-1px);
        }

        /* No-image banner fallback */
        .banner-card.no-image {
            background: var(--navy2);
            color: var(--text-strong);
        }
        .banner-card.no-image .banner-card-title { color: var(--text-strong); }
        .banner-card.no-image .banner-card-label { color: var(--accent2); }

        /* ============================================
           PRODUCTS SECTION
           ============================================ */
        .products-section {
            padding: var(--sp-5) 0;
        }

        .section-header {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            margin-bottom: var(--sp-3);
        }

        .section-title {
            font-family: var(--font-display);
            font-size: clamp(1.5rem, 3vw, 2.2rem);
            font-weight: 300;
            color: var(--text-strong);
        }

        .section-link {
            font-family: var(--font-body);
            font-size: 0.82rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--accent2);
            transition: color 150ms ease;
        }

        .section-link:hover { color: var(--accent); }

        /* ============================================
           PRODUCT GRID
           ============================================ */
        .products-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: var(--sp-2);
        }

        .product-card {
            background: #ffffff;
            border: 1px solid var(--border);
            overflow: hidden;
            transition: all 250ms ease;
            display: flex;
            flex-direction: column;
        }

        .product-card:hover {
            border-color: var(--border2);
            box-shadow: 0 8px 24px rgba(0,153,204,0.08);
            transform: translateY(-2px);
        }

        .product-link {
            display: block;
            text-decoration: none;
            color: inherit;
        }

        .product-image-wrapper {
            position: relative;
            aspect-ratio: 1/1;
            background: #faf8f5;
            overflow: hidden;
        }

        .product-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 250ms ease;
        }

        .product-card:hover .product-image {
            transform: scale(1.05);
        }

        .product-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(15,31,46,0.12);
            font-size: 3rem;
        }

        .product-badge {
            position: absolute;
            top: var(--sp-1);
            left: var(--sp-1);
            padding: var(--sp-1) var(--sp-1);
            font-family: var(--font-mono);
            font-size: 0.72rem;
            font-weight: 500;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--navy);
            background: var(--accent);
            z-index: 1;
        }

        .product-badge.sale { background: var(--status-alert); }
        .product-badge.rental { background: var(--status-clean); }
        .product-badge.service { background: var(--accent); }

        .product-info {
            padding: var(--sp-2);
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .product-name {
            font-family: var(--font-body);
            font-size: 0.92rem;
            font-weight: 500;
            color: var(--text-strong);
            margin-bottom: 2px;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .product-microcopy {
            font-family: var(--font-body);
            font-size: 0.72rem;
            color: var(--muted);
            font-style: italic;
            margin-bottom: var(--sp-1);
        }

        .product-price {
            display: flex;
            align-items: baseline;
            gap: var(--sp-1);
            margin-bottom: var(--sp-1);
        }

        .price-current {
            font-family: var(--font-mono);
            font-size: 1rem;
            font-weight: 500;
            color: var(--accent2);
        }

        .price-old {
            font-family: var(--font-mono);
            font-size: 0.88rem;
            color: var(--muted);
            text-decoration: line-through;
        }

        .price-unit {
            font-family: var(--font-mono);
            font-size: 0.72rem;
            color: var(--muted);
        }

        /* Quantity Controls */
        .product-actions {
            margin-top: auto;
            display: flex;
            flex-direction: column;
            gap: var(--sp-1);
        }

        .quantity-selector {
            display: flex;
            align-items: center;
            border: 1px solid var(--border);
            overflow: hidden;
        }

        .qty-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ffffff;
            border: none;
            color: var(--subtle);
            font-size: 1rem;
            transition: all 150ms ease;
        }

        .qty-btn:hover:not(:disabled) {
            background: var(--navy);
            color: var(--text-strong);
        }

        .qty-btn:disabled { color: var(--border); cursor: not-allowed; }

        .qty-input {
            flex: 1;
            text-align: center;
            font-family: var(--font-mono);
            font-weight: 500;
            color: var(--text-strong);
            font-size: 0.85rem;
            border: none;
            border-left: 1px solid var(--border);
            border-right: 1px solid var(--border);
            padding: var(--sp-1);
            min-width: 36px;
            background: #ffffff;
        }

        .add-to-cart-btn {
            width: 100%;
            padding: 0.55rem 1rem;
            background: var(--accent);
            color: #fff;
            font-family: "DM Sans", sans-serif;
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            border: none;
            border-radius: 0;
            transition: background 0.25s, transform 0.25s;
        }

        .add-to-cart-btn:hover {
            background: var(--accent);
            transform: translateY(-1px);
        }

        .add-to-cart-btn.in-cart {
            background: var(--status-live);
            color: #fff;
        }

        /* ============================================
           INLINE BANNERS (zwischen Produkten)
           ============================================ */
        .inline-banner-row {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: var(--sp-3);
            margin: var(--sp-5) 0;
        }

        .inline-banner {
            position: relative;
            overflow: hidden;
            min-height: 300px;
            display: flex;
            padding: var(--sp-4);
            background: var(--navy2);
            transition: transform 150ms ease;
        }

        .inline-banner:hover { transform: translateY(-2px); }

        .inline-banner::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(245,241,235,0.95) 0%, rgba(245,241,235,0.85) 45%, rgba(245,241,235,0.3) 70%, transparent 100%);
            z-index: 1;
            pointer-events: none;
        }

        .inline-banner-content {
            position: relative;
            z-index: 2;
            max-width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .inline-banner-subtitle {
            font-family: var(--font-mono);
            font-size: 0.75rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--subtle);
            margin-bottom: var(--sp-1);
        }

        .inline-banner-title {
            font-family: var(--font-display);
            font-size: 1.6rem;
            font-weight: 300;
            color: var(--text-strong);
            line-height: 1.2;
            margin-bottom: var(--sp-1);
        }

        .inline-banner-desc {
            font-size: 0.85rem;
            color: var(--subtle);
            margin-bottom: var(--sp-2);
            line-height: 1.5;
        }

        .inline-banner-btn {
            display: inline-block;
            padding: 0.85rem 1.8rem;
            background: var(--accent);
            color: #fff;
            font-family: "DM Sans", sans-serif;
            font-size: 1.01rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            border: none;
            border-radius: 0;
            transition: background 0.25s, transform 0.25s;
            align-self: flex-start;
        }

        .inline-banner-btn:hover {
            background: var(--accent); transform: translateY(-1px);
        }

        .inline-banner-badge {
            position: absolute;
            top: var(--sp-3);
            right: 38%;
            width: 80px;
            height: 80px;
            background: var(--accent);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-family: var(--font-mono);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            z-index: 3;
            border-radius: 50%;
        }

        .inline-banner-image {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 55%;
            background-size: cover;
            background-position: center;
            z-index: 0;
        }

        .inline-banner-image-placeholder {
            position: absolute;
            right: var(--sp-3);
            top: 50%;
            transform: translateY(-50%);
            width: 160px;
            height: 200px;
            background: rgba(15,31,46,0.03);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(15,31,46,0.12);
            font-size: 3rem;
            z-index: 0;
        }

        /* ============================================
           LARGE BANNER (vollbreit)
           ============================================ */
        .large-banner {
            position: relative;
            min-height: 400px;
            overflow: hidden;
            display: flex;
            align-items: center;
            margin: var(--sp-5) auto;
            max-width: 1280px;
            padding: 0 var(--sp-3);
        }

        .large-banner-inner {
            position: relative;
            width: 100%;
            min-height: 400px;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: var(--sp-6) var(--sp-5);
        }

        .large-banner-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
        }

        .large-banner-bg::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(15,31,46,0.85) 0%, rgba(15,31,46,0.5) 50%, rgba(15,31,46,0.2) 100%);
        }

        .large-banner-content {
            position: relative;
            z-index: 1;
            max-width: 480px;
        }

        .large-banner-label {
            font-family: var(--font-mono);
            font-size: 0.72rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: var(--sp-1);
        }

        .large-banner-title {
            font-family: var(--font-display);
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 300;
            line-height: 1.15;
            color: #ffffff;
            margin-bottom: var(--sp-3);
        }

        .large-banner-btn {
            display: inline-flex;
            align-items: center;
            gap: var(--sp-1);
            padding: 0.85rem 1.8rem;
            background: var(--accent);
            color: var(--sand);
            text-decoration: none;
            font-family: var(--font-mono);
            font-size: 0.82rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            transition: background 0.2s, transform 0.2s;
        }

    

    /* Landing-spezifisch: Hero-Offset unter fixem Header */
    .hero { margin-top: 140px !important; }
    @media (max-width: 768px) {
        /* Kein margin-top — Hero startet direkt hinter dem fixed Header.
           hero-inner-Padding oben schiebt den Text unterhalb des Headers. */
        .hero { margin-top: 0 !important; }
    }

    /* ── Fluid Typography (Landing) ── */
    /* Hero-Title: figma-overrides (clamp 3rem,6vw,5.5rem) bleibt, kein Override */
    .hero-description{ font-size: clamp(0.95rem, 1.5vw, 1.15rem) !important; }

    /* Abschnitts-Titel & Eyebrow */
    .section-title   { font-size: clamp(1.25rem, 2.5vw, 2rem) !important; }

    /* Banner */
    .banner-card-title   { font-size: clamp(1rem, 2vw, 1.6rem) !important; }
    .inline-banner-title { font-size: clamp(1.1rem, 2.5vw, 1.8rem) !important; }
    .large-banner-title  { font-size: clamp(1.4rem, 3.5vw, 3rem) !important; }

    /* ── Fade-in Animationen ── */
    .animate-fadein {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .animate-fadein.visible { opacity: 1; transform: translateY(0); }

    /* Hero-Load */
    @keyframes heroFadeUp {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .hero-title       { animation: heroFadeUp 0.7s ease both; }
    .hero-description { animation: heroFadeUp 0.7s 0.15s ease both; }
    .hero-cta-wrap    { animation: heroFadeUp 0.7s 0.3s  ease both; }
    .hero-trust-line  { animation: heroFadeUp 0.7s 0.45s ease both; }
    .hero-trust-line {
        margin-top: 1rem;
        font-family: var(--font-mono);
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(154,163,184,0.7);
    }
    .hero-image-gradient {
        width: 100%; height: 100%;
        background: linear-gradient(135deg,#0d2137 0%,#0e3a52 40%,#1a5f78 70%,#0d9bb5 100%);
    }

    /* ── Trust Numbers ── */
    .trust-numbers {
        background: var(--navy);
        padding: var(--sp-4) 0;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .trust-numbers-grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        max-width: 900px;
        margin: 0 auto;
        padding: 0 var(--sp-gutter);
        text-align: center;
    }
    .trust-num-item {
        padding: var(--sp-2);
        border-right: 1px solid rgba(255,255,255,0.08);
    }
    .trust-num-item:last-child { border-right: none; }
    .trust-num-value {
        font-family: var(--font-display);
        font-size: clamp(1.8rem,3vw,2.8rem);
        font-weight: 300;
        color: var(--text-strong);
        line-height: 1;
        display: block;
    }
    .trust-num-label {
        font-family: var(--font-mono);
        font-size: clamp(0.6rem, 1.1vw, 0.72rem);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text-strong);
        display: block;
        margin-top: 0.35rem;
    }

    /* ── Abschnitt-Basis ── */
    .lp-section     { padding: var(--sp-7) 0; }
    .lp-section-alt { padding: var(--sp-7) 0; background: var(--sand); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .lp-container   { max-width: 1100px; margin: 0 auto; padding: 0 var(--sp-gutter); }
    .lp-eyebrow {
        font-family: var(--font-mono);
        font-size: clamp(0.72rem, 1.4vw, 0.9rem);
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: var(--sp-2);
        display: block;
        font-weight: 700;
    }
    .lp-heading {
        font-family: var(--font-display);
        font-size: clamp(1.5rem, 3.2vw, 2.5rem);
        font-weight: 600;
        color: var(--text-strong);
        margin-bottom: var(--sp-3);
        line-height: 1.2;
    }
    .lp-lead {
        font-family: var(--font-body);
        font-size: clamp(0.9rem, 1.8vw, 1.1rem);
        line-height: 1.65;
        max-width: 680px;
        margin-bottom: var(--sp-4);
    }

    /* ── Problem ── */
    .problem-intro { margin-bottom: var(--sp-4); }
    .problem-intro p { font-family: var(--font-body); font-size: clamp(0.9rem, 1.7vw, 1.05rem); line-height: 1.7; color: var(--text-strong); margin-bottom: var(--sp-1); }
    .problem-grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: var(--sp-3);
        margin-bottom: var(--sp-4);
    }
    .problem-item {
        background: #fff;
        border: 1px solid var(--border);
        padding: var(--sp-4);
        display: flex; flex-direction: column; gap: var(--sp-2);
        transition: box-shadow 200ms ease, transform 200ms ease;
    }
    .problem-item:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.07); }
    .problem-item-icon { font-size: 1.8rem; color: #c94040; line-height: 1; }
    .problem-item h3 { font-family: var(--font-body); font-size: clamp(0.88rem, 1.6vw, 1rem); font-weight: 700; color: var(--text-strong); }
    .problem-item p  { font-family: var(--font-body); font-size: clamp(0.8rem, 1.4vw, 0.92rem); color: #6b7a99; line-height: 1.5; }
    .problem-list {
        list-style: none; padding: 0; margin: 0 0 var(--sp-3);
        display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem var(--sp-4); max-width: 800px;
    }
    .problem-list li {
        font-family: var(--font-body); font-size: clamp(0.84rem, 1.5vw, 0.97rem); color: var(--text-strong);
        padding-left: 1.4rem; position: relative; line-height: 1.4;
    }
    .problem-list li::before { content:"→"; position: absolute; left: 0; color: #c94040; font-size: clamp(0.8rem, 1.3vw, 0.9rem); }
    .problem-closer { font-family: var(--font-body); font-size: clamp(0.88rem, 1.6vw, 1rem); font-style: italic; color: #6b7a99; }

    /* ── Lösung ── */
    .solution-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
    .solution-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; margin-bottom: var(--sp-3); }
    .solution-text p { font-family: var(--font-body); font-size: clamp(0.88rem, 1.6vw, 1rem); line-height: 1.7; color: rgba(255,255,255,0.85); margin-bottom: var(--sp-2); }
    .solution-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
    .solution-checklist li {
        font-family: var(--font-body); font-size: clamp(0.84rem, 1.5vw, 0.97rem); color: var(--text-strong);
        padding: 0.65rem var(--sp-3) 0.65rem 3rem;
        background: #fff; border: 1px solid var(--border); position: relative; line-height: 1.4;
    }
    .solution-checklist li::before {
        font-family: "Bootstrap Icons"; content: "\f26a";
        position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
        color: var(--accent); font-size: 1.1rem;
    }

    /* ── Leistungen ── */
    .leistungen-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3); }
    .leistung-card {
        background: #fff; border: 1px solid var(--border); padding: var(--sp-4);
        display: flex; flex-direction: column; gap: var(--sp-2);
        transition: transform 200ms ease, box-shadow 200ms ease;
    }
    .leistung-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,0.08); }
    .leistung-card.secondary { background: var(--sand); }
    .leistung-card.secondary h3 { color: #fff; }
    .leistung-card.secondary p  { color: rgba(255,255,255,0.78); }
    .leistung-card.secondary a  { color: var(--accent); }
    .leistung-icon { font-size: 1.6rem; color: var(--accent); line-height: 1; }
    .leistung-card.secondary .leistung-icon { color: var(--accent); }
    .leistung-card h3 { font-family: var(--font-body); font-size: clamp(0.88rem, 1.6vw, 1rem); font-weight: 700; color: var(--text-strong); }
    .leistung-card p  { font-family: var(--font-body); font-size: clamp(0.78rem, 1.4vw, 0.9rem); color: #6b7a99; line-height: 1.5; flex: 1; }
    .leistung-card a  { font-size: clamp(0.76rem, 1.3vw, 0.86rem); color: var(--accent); text-decoration: none; }
    .leistung-card a:hover { text-decoration: underline; }

    /* ── Nutzen ── */
    .nutzen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-5); max-width: 900px; }
    .nutzen-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
    .nutzen-item:nth-last-child(-n+2) { border-bottom: none; }
    .nutzen-icon { font-size: 1.5rem; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
    .nutzen-item h3 { font-family: var(--font-body); font-size: clamp(0.88rem, 1.6vw, 1rem); font-weight: 700; color: #fff; margin-bottom: 0.25rem; }
    .nutzen-item p  { font-family: var(--font-body); font-size: clamp(0.8rem, 1.4vw, 0.92rem); color: #fff; line-height: 1.5; }

    /* ── Steps ── */
    .steps-row {
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr;
        align-items: start; gap: 0; max-width: 900px; margin: 0 auto;
    }
    .step-item { text-align: center; padding: 0 var(--sp-2); }
    .step-num {
        width: 52px; height: 52px; border-radius: 50%;
        background: var(--accent); color: #fff;
        font-family: var(--font-display); font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 300;
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto var(--sp-3);
    }
    .step-item h3 { font-family: var(--font-body); font-size: clamp(0.9rem, 1.7vw, 1.05rem); font-weight: 700; color: var(--text-strong); margin-bottom: var(--sp-1); }
    .step-item p  { font-family: var(--font-body); font-size: clamp(0.8rem, 1.4vw, 0.92rem); color: #6b7a99; line-height: 1.5; }
    .step-connector { padding-top: 26px; color: var(--border); font-size: 1.4rem; text-align: center; }

    /* ── Vertrauen ── */
    .vertrauen-section { background: var(--navy); color: #9AA3B8; padding: var(--sp-7) 0; }
    .vertrauen-section .lp-heading { color: var(--text-strong); }
    .vertrauen-section .lp-lead { color: #6b7a99; }
    .vertrauen-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); margin-top: var(--sp-5); }
    .vertrauen-item { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid rgba(255,255,255,0.08); }
    .vertrauen-item i  { font-size: 1.6rem; color: var(--accent); }
    .vertrauen-item h3 { font-family: var(--font-body); font-size: clamp(0.88rem, 1.6vw, 1rem); font-weight: 700; color: var(--text-strong); }
    .vertrauen-item p  { font-family: var(--font-body); font-size: clamp(0.8rem, 1.4vw, 0.92rem); line-height: 1.55; color: var(--text-strong); }

    /* ── Risiko ── */
    .risiko-section { padding: var(--sp-6) 0; text-align: center; background: #fff; }
    .risiko-section p { font-family: var(--font-body); font-size: clamp(0.88rem, 1.6vw, 1rem); color: #6b7a99; line-height: 1.65; max-width: 540px; margin: 0 auto var(--sp-2); }
    .risiko-badges { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-3); flex-wrap: wrap; }
    .risiko-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }

    /* ── Final CTA ── */
    .final-cta-section { background: var(--navy); padding: var(--sp-8) 0; text-align: center; }
    .final-cta-section .lp-heading { color: var(--text-strong); font-size: clamp(1.5rem,3vw,2.5rem); }
    .final-cta-section p { font-family: var(--font-body); font-size: clamp(0.88rem, 1.6vw, 1rem); color: #6b7a99; max-width: 480px; margin: 0 auto var(--sp-4); }
    .final-cta-btn {
        display: inline-flex; align-items: center; gap: var(--sp-2);
        padding: 1rem 2.2rem; background: var(--accent); color: #fff;
        font-family: var(--font-body); font-size: clamp(0.88rem, 1.7vw, 1.05rem); font-weight: 700;
        letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
        transition: opacity 150ms ease, transform 150ms ease;
    }
    .final-cta-btn:hover { opacity: 0.9; transform: translateY(-2px); }

    /* ── Shop Hinweis ── */
    .shop-note { text-align: center; padding: var(--sp-3) 0; background: var(--sand); font-family: var(--font-body); font-size: 0.82rem; color: #6b7a99; border-top: 1px solid var(--border); margin: 0; }
    .shop-note a { color: var(--accent); text-decoration: none; }
    .shop-note a:hover { text-decoration: underline; }

    /* ── Footer: Farben/Schrift kommen aus shop-layout.css ── */

    /* ── Top-Bar Links ── */
    .top-bar-links a, .top-bar-links span { color: #fff !important; }
    .top-bar-contact a { color: #fff !important; }
    .top-bar-contact a:hover { color: var(--accent) !important; }

    /* ── Header Nav Links ── */
    .header-row-categories a { color: #fff !important; }
    .header-row-categories a:hover { opacity: 0.75; }
    .header-row-categories .nav-shop-link { color: var(--accent) !important; font-weight: 700; margin-left: auto; }

    /* ── Mobile Logo / Shop-Link ── */
    .logo-mobile-topbar { display: none; }
    .header-shop-mobile { display: none; }

    /* ── Header Nav CTA ── */
    .header-nav-cta {
        display: inline-block;
        padding: 0.45rem 1.1rem;
        background: var(--accent);
        color: #fff !important;
        font-family: var(--font-body);
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-decoration: none !important;
        border-radius: 0;
        transition: opacity 150ms ease;
    }
    .header-nav-cta:hover { opacity: 0.88; }

    /* ── Mobile Sticky CTA Override ── */
    .mobile-sticky-cta { display: none !important; }

    /* ── Responsive ── */
    @media (max-width: 1024px) {
        .leistungen-grid { grid-template-columns: repeat(2,1fr); }
        .vertrauen-grid  { grid-template-columns: repeat(2,1fr); }
    }
    @media (max-width: 768px) {
        .problem-grid    { grid-template-columns: 1fr; }
        .problem-list    { grid-template-columns: 1fr; }
        .solution-grid   { grid-template-columns: 1fr; }
        .leistungen-grid { grid-template-columns: 1fr; }
        .nutzen-grid     { grid-template-columns: 1fr; }
        .nutzen-item:last-child { border-bottom: none; }
        .vertrauen-grid  { grid-template-columns: 1fr; }
        /* Trust-Zahlen: alle drei nebeneinander */
        .trust-numbers-grid { grid-template-columns: repeat(3,1fr); }
        /* Header-Nav + Mobile-Category-Nav auf Landing Page ausblenden */
        .header-row-categories { display: none !important; }
        .mobile-category-nav { display: none !important; }
        /* Mobile Top-Bar: Logo links, WhatsApp rechts — Gäste-Shop-Link ausblenden */
        .top-bar-links { display: none !important; }
        .top-bar-center { display: none !important; }
        .top-bar-inner { justify-content: space-between !important; align-items: center !important; }
        .logo-mobile-topbar {
            display: flex !important;
            align-items: center;
            height: 32px;
            flex-shrink: 0;
        }
        .logo-mobile-topbar img {
            height: 32px !important;
            width: auto !important;
            max-width: 120px !important;
            object-fit: contain !important;
        }
        /* Desktop-Logo im Header ausblenden */
        .logo-desktop { display: none !important; }
        /* Gäste-Shop neben Objekt anmelden */
        .header-shop-mobile {
            display: inline-flex !important;
            align-items: center;
            gap: 0.3rem;
            font-family: var(--font-body);
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--accent) !important;
            text-decoration: none;
            letter-spacing: 0.04em;
            margin-right: 0.5rem;
        }
        /* Header-Row-Top: nur rechts ausgerichtet, da Logo in Top-Bar */
        .header-row-top { justify-content: flex-end !important; min-height: unset !important; padding: 0.4rem var(--sp-gutter) !important; }
        .header-actions { gap: 0.5rem !important; }
        .steps-row {
            grid-template-columns: 1fr;
            position: relative;
            padding-left: 3rem;
        }
        .steps-row::before {
            content: '';
            position: absolute;
            left: 1.4rem; top: 26px; bottom: 26px;
            width: 2px; background: var(--border);
        }
        .step-connector { display: none; }
        .step-item { text-align: left; padding: 0 0 var(--sp-4); }
        .step-num  { margin: 0 0 var(--sp-2); }
        /* Mobile Hero — kein Dark-Box, Gradient + explizite Zentrierung */
        .hero {
            background:
                linear-gradient(to bottom,
                    rgba(10,22,36,0.12) 0%,
                    rgba(10,22,36,0.55) 55%,
                    rgba(10,22,36,0.90) 100%),
                url('https://maikie.de/uploads/hero/damp-haus.webp') center 30%/cover no-repeat !important;
            align-items: flex-end !important;
        }
        .hero-inner {
            display: block !important;
            padding: max(96px, 18vh) var(--sp-gutter) max(4rem, 8vh) !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            margin: 0 !important;
        }
        .hero-text {
            background: none !important;
            padding: 0 !important;
            max-width: 100% !important;
            width: 100% !important;
            margin: 0 !important;
            float: none !important;
            display: block !important;
            box-sizing: border-box;
        }
        .hero-title,
        .hero .hero-title {
            text-align: center !important;
            font-size: clamp(1.9rem, 9vw, 2.8rem) !important;
            text-shadow: 0 2px 22px rgba(0,0,0,0.45) !important;
        }
        .hero-description,
        .hero .hero-description {
            text-align: center !important;
            font-size: 0.95rem !important;
            text-shadow: 0 1px 10px rgba(0,0,0,0.35) !important;
            max-width: 100% !important;
        }
        .hero-cta-wrap {
            text-align: center !important;
        }
        .hero-cta {
            display: inline-block !important;
            width: auto !important;
            font-size: 0.9rem !important;
            padding: 0.8rem 1.8rem !important;
            letter-spacing: 0.06em !important;
        }
        .hero-trust-line,
        .hero .hero-trust-line {
            text-align: center !important;
            text-shadow: 0 1px 8px rgba(0,0,0,0.4) !important;
        }
        /* Trust-Zahlen: weniger Leerraum */
        .trust-numbers { padding: var(--sp-3) 0 !important; }
        /* Hilfklassen */
        .hide-mobile { display: none !important; }
        .topbar-hide-mobile { display: none !important; }
    }

    /* ── Modal-Body scrollbar ── */
    .modal-body { overflow-y: auto; max-height: calc(90vh - 120px); }

    /* ── Modal Mobile: vollbild, sicher scrollbar ── */
    @media (max-width: 768px) {
        .modal-overlay.active { align-items: flex-end !important; padding: 0 !important; }
        .modal-content.modal-contact {
            width: 100% !important;
            max-width: 100% !important;
            max-height: 92dvh !important;
            border-radius: 0 !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
        }
        .modal-body {
            flex: 1 1 auto !important;
            overflow-y: auto !important;
            max-height: none !important;
            -webkit-overflow-scrolling: touch;
            padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
        }
        .ocf-row { grid-template-columns: 1fr !important; }
    }

    /* ── prefers-reduced-motion ── */
    @media (prefers-reduced-motion: reduce) {
        .animate-fadein { opacity: 1 !important; transform: none !important; transition: none !important; }
        .hero-title, .hero-description, .hero-cta-wrap, .hero-trust-line { animation: none !important; }
    }

    /* ── Cormorant Garamond (lokal, /assets/fonts/) ── */

/* ── Hero: Vollbild-Hintergrundbild ── */
    .hero {
        background:
            linear-gradient(rgba(15,31,46,0.22), rgba(15,31,46,0.36)),
            url('https://maikie.de/uploads/hero/damp-haus.webp') center/cover no-repeat !important;
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
    }
    .hero-inner {
        grid-template-columns: 1fr !important;
        max-width: 1100px;
        margin: 0 auto;
        width: 100%;
        padding: max(5rem, 10vh) var(--sp-gutter) !important;
    }
    .hero-image { display: none !important; }
    .hero-text  {
        max-width: 660px;
        margin-left: 0 !important;
        padding: 2rem 2.2rem !important;
        background: rgba(10,22,36,0.48);
    }
    /* Hero: Texte auf weißem Bild-Hintergrund erzwingen */
    .hero-title,
    .hero .hero-title     { color: #fff !important; }
    .hero-description,
    .hero .hero-description { color: rgba(255,255,255,0.82) !important; }
    .hero-trust-line,
    .hero .hero-trust-line  { color: #fff !important; }

    .hero-title {
        font-family: "Cormorant Garamond", serif !important;
        font-size: clamp(2.8rem, 5.5vw, 5rem) !important;
        font-weight: 300 !important;
        line-height: 1.08 !important;
    }
    .hero-title em { font-style: italic; color: var(--accent); }

    /* ── Kontaktformular Modal ── */
    .modal-contact { max-width: 580px; }
    .modal-contact .modal-header h3 {
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(1.2rem, 2.6vw, 1.7rem); font-weight: 300;
    }
    .modal-subtext { font-size: clamp(0.8rem, 1.4vw, 0.92rem); color: #6b7a99; margin-bottom: var(--sp-3); line-height: 1.5; }
    .ocf-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
    .ocf-group { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: var(--sp-2); }
    .ocf-group label {
        font-family: var(--font-mono); font-size: 0.7rem;
        letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
    }
    .ocf-group input,
    .ocf-group textarea {
        padding: 0.65rem 0.9rem; border: 1px solid var(--border); background: #fff;
        font-family: var(--font-body); font-size: 0.9rem; color: var(--text-strong);
        outline: none; transition: border-color 150ms ease; border-radius: 0;
        -webkit-appearance: none;
    }
    .ocf-group input:focus,
    .ocf-group textarea:focus { border-color: var(--accent2); }
    .ocf-group textarea { resize: vertical; min-height: 80px; }
    .ocf-submit {
        width: 100%; margin-top: var(--sp-2); justify-content: center;
        cursor: pointer; border: none;
    }
    .ocf-result {
        margin-bottom: var(--sp-2); padding: var(--sp-2) var(--sp-3);
        font-size: 0.88rem; line-height: 1.5;
    }
    .ocf-result.success { background: rgba(0,200,240,0.08); color: var(--accent2); }
    .ocf-result.error   { background: rgba(201,64,64,0.08);  color: #c94040; }
    .modal-footer-actions {
        flex-shrink: 0;
        padding: 1rem 1.5rem;
        border-top: 1px solid var(--border);
        background: #fff;
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
    @media (max-width: 600px) { .ocf-row { grid-template-columns: 1fr; } }