/* =====================================================
LANDINGPAGE – FAMILIENPLANER APP
Datei: familienplaner-app.css
===================================================== */

.fp-page{
    background:#FAF6F1;
    color:#26332B;
    font-family:"Inter", sans-serif;
    overflow:hidden;
}

.fp-page *{
    box-sizing:border-box;
}

.fp-page a{
    text-decoration:none;
}

/* =====================================================
HERO
===================================================== */

.fp-hero{
    max-width:1380px;
    margin:0 auto;
    padding:70px 24px 60px;

    display:grid;
    grid-template-columns:0.82fr 1.18fr;
    gap:40px;
    align-items:center;
}

.fp-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:9px 16px;
    margin-bottom:22px;

    border-radius:999px;

    background:#F5DDCB;
    color:#33443A;

    font-size:15px;
    font-weight:600;
}

.fp-hero h1{
    max-width:560px;

    margin:0 0 22px;

    font-size:58px;
    line-height:1.08;
    letter-spacing:-1.6px;

    color:#26332B;
}

.fp-hero h1::after{
    content:"";
    display:block;

    width:280px;
    height:4px;

    margin-top:12px;

    border-radius:999px;
    background:#E8A06D;
}

.fp-hero-text{
    max-width:560px;

    margin:0 0 30px;

    font-size:18px;
    line-height:1.7;

    color:#4F5A52;
}

.fp-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:16px;

    margin-bottom:32px;
}

.fp-btn{
    min-height:56px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:0 28px;

    border-radius:12px;

    font-size:16px;
    font-weight:700;

    transition:.25s ease;
}

.fp-btn-primary{
    background:#5F7B62;
    color:#FFFFFF;
    box-shadow:0 10px 24px rgba(95,123,98,.22);
}

.fp-btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(95,123,98,.28);
}

.fp-btn-secondary{
    background:#FFFFFF;
    color:#26332B;
    border:1px solid #E8DED5;
}

.fp-btn-secondary:hover{
    background:#F8F1EA;
}

.fp-rating{
    display:flex;
    align-items:center;
    gap:18px;
}

.fp-avatar-row{
    display:flex;
}

.fp-avatar-row span{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    margin-left:-8px;

    border:3px solid #FAF6F1;
    border-radius:50%;

    background:#FFFFFF;
    box-shadow:0 4px 14px rgba(0,0,0,.08);

    font-size:18px;
}

.fp-avatar-row span:first-child{
    margin-left:0;
}

.fp-stars{
    color:#E29A42;
    font-size:15px;
    letter-spacing:.5px;
}

.fp-stars strong{
    margin-left:8px;
    color:#26332B;
}

.fp-rating p{
    margin:5px 0 0;
    color:#5D665F;
    font-size:14px;
}

/* =====================================================
HERO MOCKUP
===================================================== */

.fp-hero-visual{
    position:relative;
    min-height:620px;
}

.fp-hero-image{
    display:block;

    width:100%;
    max-width:860px;
    height:auto;

    margin-left:auto;

    object-fit:contain;
}

.fp-app-mockup{
    position:relative;

    display:grid;
    grid-template-columns:150px 1fr;

    min-height:560px;

    background:#FBF8F4;
    border:1px solid #E5D9CF;
    border-radius:24px;

    box-shadow:0 25px 70px rgba(61,45,34,.16);

    overflow:hidden;
}

.fp-sidebar{
    background:#F1EAE0;
    padding:24px 18px;
}

.fp-mini-logo{
    margin-bottom:28px;

    font-size:19px;
    font-weight:800;
    letter-spacing:2px;

    color:#25342B;
}

.fp-sidebar nav{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.fp-sidebar nav span{
    padding:11px 12px;

    border-radius:10px;

    font-size:13px;
    color:#46544B;
}

.fp-sidebar nav span.active{
    background:#FFFFFF;
    color:#24372A;
    font-weight:700;
}

.fp-dashboard-preview{
    padding:28px;
}

.fp-preview-top{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:24px;
}

.fp-preview-top strong{
    font-size:18px;
    color:#26332B;
}

.fp-preview-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:18px;
}

.fp-preview-card{
    min-height:190px;

    padding:20px;

    border:1px solid #E8DED5;
    border-radius:18px;

    background:#FFFFFF;
    box-shadow:0 8px 20px rgba(0,0,0,.035);
}

.fp-preview-card-head{
    display:flex;
    justify-content:space-between;
    gap:14px;

    margin-bottom:18px;
}

.fp-preview-card-head strong{
    color:#253B2A;
    font-size:16px;
}

.fp-preview-card-head span{
    color:#8C8178;
    font-size:12px;
}

.fp-preview-card p{
    margin:12px 0;

    color:#4E5B52;
    font-size:14px;
    line-height:1.45;
}

.fp-phone-mockup{
    position:absolute;
    right:-18px;
    bottom:18px;

    width:180px;
    min-height:340px;

    padding:20px 16px;

    border:8px solid #1E211F;
    border-radius:30px;

    background:#FFFFFF;

    box-shadow:0 20px 46px rgba(0,0,0,.2);
}


.fp-phone-notch{
    width:54px;
    height:6px;

    margin:0 auto 14px;

    border-radius:999px;
    background:#1E211F;
}

.fp-phone-title{
    margin-bottom:14px;

    font-size:15px;
    font-weight:800;
}

.fp-phone-days{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:5px;

    margin-bottom:14px;

    color:#68736B;
    font-size:11px;
    text-align:center;
}

.fp-phone-event{
    padding:9px 10px;
    margin-bottom:8px;

    border-radius:10px;

    background:#FBE8E2;
    color:#314235;

    font-size:11px;
    font-weight:700;
}

.fp-phone-event.green{
    background:#EAF1E3;
}

.fp-phone-list{
    margin-top:14px;

    border-top:1px solid #EEE7E2;
    padding-top:10px;
}

.fp-phone-list p{
    margin:8px 0;
    font-size:12px;
    color:#4C554E;
}

/* =====================================================
SECTIONS GLOBAL
===================================================== */

.fp-section{
    max-width:1280px;
    margin:0 auto;
    padding:54px 24px;
}

.fp-section-head{
    max-width:760px;
    margin:0 auto 34px;
    text-align:center;
}

.fp-section-head h2{
    margin:0 0 12px;

    font-size:34px;
    line-height:1.25;

    color:#26332B;
}

.fp-section-head p{
    margin:0;

    font-size:17px;
    line-height:1.7;

    color:#5E675F;
}

/* =====================================================
FEATURES
===================================================== */

.fp-features{
    position:relative;
    overflow:visible;
}

.fp-plant-graphic{
    position:absolute;
    right:-145px;
    top:145px;

    width:170px;
    height:auto;

    pointer-events:none;
    user-select:none;

    z-index:0;
}

.fp-feature-grid{
    position:relative;
    z-index:1;
}

.fp-feature-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:18px;
}

.fp-feature-card{
    min-height:220px;

    padding:28px 22px;

    border:1px solid #E9DED5;
    border-radius:18px;

    background:#FFFDFB;

    text-align:center;

    transition:.25s ease;
}

.fp-feature-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 36px rgba(53,40,30,.08);
}

.fp-feature-icon{
    width:50px;
    height:50px;

    margin:0 auto 16px;

    display:grid;
    place-items:center;

    border-radius:16px;

    background:#F1F5EA;

    font-size:25px;
}

.fp-feature-icon img{
    width:30px;
    height:30px;
    display:block;
    object-fit:contain;
}

.fp-feature-card h3{
    margin:0 0 10px;

    font-size:18px;
    color:#26332B;
}

.fp-feature-card p{
    margin:0;

    font-size:14px;
    line-height:1.55;

    color:#5E675F;
}

/* =====================================================
SPLIT SECTION
===================================================== */

.fp-split-section{
    max-width:1280px;
    margin:20px auto 0;
    padding:0 24px 54px;

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:38px;
}

.fp-split-text{
    padding:48px 28px;
}

.fp-split-text h2{
    margin:0 0 22px;

    font-size:38px;
    line-height:1.22;

    color:#26332B;
}

.fp-split-text h2 span{
    color:#668151;
}

.fp-split-text p{
    margin:0 0 24px;

    font-size:17px;
    line-height:1.75;

    color:#59645C;
}

.fp-check-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px 24px;

    color:#3D5442;
    font-size:15px;
    font-weight:600;
}

.fp-split-image{
    overflow:hidden;

    border-radius:28px;

    box-shadow:0 16px 38px rgba(61,45,34,.1);
}

.fp-split-image img{
    width:100%;
    height:420px;

    object-fit:cover;
    display:block;
}

/* =====================================================
BENEFITS
===================================================== */

.fp-benefits{
    max-width:1280px;
    margin:0 auto;
    padding:30px 24px 50px;

    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
}

.fp-benefits article{
    padding:26px;

    border-radius:22px;

    background:#FFFDFB;
    border:1px solid #E9DED5;
}

.fp-benefits article div{
    width:56px;
    height:56px;

    display:grid;
    place-items:center;

    margin-bottom:14px;

    border-radius:50%;

    background:#EAF1E0;

    font-size:24px;
}

.fp-benefits article div img{
    width:30px;
    height:30px;
    display:block;
    object-fit:contain;
    opacity:1;
    filter:contrast(1.15) saturate(1.05);
}

.fp-benefits h3{
    margin:0 0 8px;

    font-size:18px;
    color:#26332B;
}

.fp-benefits p{
    margin:0;

    font-size:14px;
    line-height:1.6;

    color:#5E675F;
}

/* =====================================================
BOTTOM SECTION
===================================================== */

.fp-bottom-section{
    max-width:1280px;
    margin:0 auto;
    padding:0 24px 80px;

    display:grid;
    grid-template-columns:0.8fr 1.2fr;
    gap:24px;
}

.fp-testimonial,
.fp-price-card{
    border:1px solid #E9DED5;
    border-radius:24px;
    background:#FFFDFB;
    box-shadow:0 14px 34px rgba(53,40,30,.055);
}

.fp-testimonial{
    padding:34px;
}

.fp-quote{
    height:44px;

    color:#E8A06D;

    font-size:70px;
    line-height:1;
}

.fp-testimonial p{
    margin:0 0 20px;

    font-size:17px;
    line-height:1.7;

    color:#4D594F;
}

.fp-testimonial strong{
    color:#26332B;
}

.fp-testimonial-graphic{
    display:block;

    width:145px;
    max-width:60%;

    margin-top:22px;

    height:auto;
    object-fit:contain;
}

.fp-price-card{
    position:relative;

    display:grid;
    grid-template-columns:1fr 220px;
    gap:24px;

    padding:34px;
}

.fp-price-card h2{
    margin:0 0 12px;

    font-size:26px;
    color:#26332B;
}

.fp-price-card p{
    margin:0 0 22px;

    color:#5D675F;
    line-height:1.65;
}

.fp-price-row{
    display:grid;
    grid-template-columns:150px 1fr;
    gap:24px;
    align-items:start;
}

.fp-price-row span{
    display:block;
    margin-bottom:8px;

    color:#5E675F;
    font-size:14px;
}

.fp-price-row strong{
    font-size:46px;
    color:#26332B;
}

.fp-price-row ul{
    margin:0;
    padding:0;

    list-style:none;
}

.fp-price-row li{
    margin-bottom:9px;

    color:#3E5544;
    font-size:15px;
}

.fp-price-row li::before{
    content:"✓";
    margin-right:8px;
    color:#6F8A5A;
    font-weight:800;
}

.fp-price-features{
    margin:0;
    padding:0;

    list-style:none;
}

.fp-price-features li{
    margin-bottom:9px;

    color:#3E5544;
    font-size:15px;
}

.fp-price-features li::before{
    content:"✓";
    margin-right:8px;
    color:#6F8A5A;
    font-weight:800;
}

.fp-price-action{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:16px;
}

.fp-price-bubble{
    width:120px;
    height:120px;

    display:grid;
    place-items:center;

    padding:18px;

    border-radius:50%;

    background:#F9D9C7;
    color:#7D4B32;

    font-size:15px;
    font-weight:800;
    text-align:center;

    transform:rotate(-2deg);
}

.fp-price-link{
    color:#26332B;
    font-weight:700;
}

/* =====================================================
RESPONSIVE
===================================================== */

@media(max-width:1100px){

    .fp-hero{
        grid-template-columns:1fr;
    }

    .fp-hero-visual{
        min-height:auto;
    }

    .fp-hero-image{
        max-width:100%;
        margin:0 auto;
    }

    .fp-plant-graphic{
        right:-40px;
        top:150px;
        width:130px;
        opacity:.55;
    }

    .fp-feature-grid{
        grid-template-columns:repeat(3, 1fr);
    }

    .fp-split-section,
    .fp-bottom-section{
        grid-template-columns:1fr;
    }

    .fp-price-card{
        grid-template-columns:1fr;
    }
}

@media(max-width:800px){

    .fp-hero{
        padding:44px 18px 40px;
    }

    .fp-hero h1{
        font-size:42px;
    }

    .fp-hero-text{
        font-size:16px;
    }

    .fp-app-mockup{
        grid-template-columns:1fr;
    }

    .fp-sidebar{
        display:none;
    }

    .fp-preview-grid{
        grid-template-columns:1fr;
    }

    .fp-phone-mockup,
    .fp-plant-graphic{
        display:none;
    }

    .fp-feature-grid,
    .fp-benefits{
        grid-template-columns:1fr 1fr;
    }

    .fp-split-text{
        padding:28px 0;
    }

    .fp-split-text h2,
    .fp-section-head h2{
        font-size:30px;
    }

    .fp-check-grid{
        grid-template-columns:1fr;
    }

    .fp-split-image img{
        height:300px;
    }

    .fp-bottom-section{
        padding-bottom:50px;
    }
}

@media(max-width:520px){

    .fp-hero h1{
        font-size:36px;
    }

    .fp-hero-actions{
        flex-direction:column;
    }

    .fp-btn{
        width:100%;
    }

    .fp-rating{
        align-items:flex-start;
        flex-direction:column;
    }

    .fp-feature-grid,
    .fp-benefits{
        grid-template-columns:1fr;
    }

    .fp-price-row{
        grid-template-columns:1fr;
    }

    .fp-price-bubble{
        width:105px;
        height:105px;
    }
}