/* Ergänzungen zu home.css für die Beratungsseite (Warum, Themen, Angebot, Hinweis). */

.hero .section-label {
    margin-bottom: 1em;
}

/* ── Warum ── */
.warum {
    padding: 4.5rem 0 1rem;
}

.warum-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    margin-top: 2rem;
}

.warum-card {
    padding: 1.8rem 1.8rem 1.4rem;
}

.warum-card h3 {
    font-size: 1.35rem;
}

.warum-card p {
    color: var(--muted);
    font-size: 1.15rem;
    margin: 0;
}

/* ── Themen (nutzt .method aus home.css) ── */
.themen-grid .method-card h3 {
    font-size: 1.4rem;
    margin-top: 0;
}

/* ── Angebot ── */
.angebot {
    padding: 4.5rem 0 1rem;
}

.angebot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.4rem;
    margin-top: 2rem;
    align-items: stretch;
}

.angebot-card {
    display: flex;
    flex-direction: column;
    padding: 2.2rem 2rem;
}

.angebot-haupt {
    background: linear-gradient(140deg, var(--sand), #fff 65%);
    border-color: rgba(168, 74, 92, 0.35);
}

.angebot-card .tag {
    align-self: flex-start;
}

.angebot-card h3 {
    font-size: 1.8rem;
    margin: 0.6em 0 0.1em;
}

.angebot-dauer {
    color: var(--rose-dark);
    font-weight: 600;
}

.angebot-card > p:not(.angebot-dauer) {
    color: var(--muted);
    font-size: 1.15rem;
}

.angebot-foot {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding-top: 1rem;
}

.angebot-foot .preis {
    margin: 0;
}

.angebot-hinweis {
    color: var(--muted);
    font-size: 1.15rem;
    margin-top: 1.4rem;
    max-width: 46em;
}

@media (max-width: 900px) {
    .warum-grid,
    .angebot-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .angebot-foot {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.angebot-haupt .tag {
    background: #fff;
}

/* Mobil: Hero-Foto immer sichtbar (volle Breite bis 420px), Über-mich-Foto zentriert */
@media (max-width: 900px) {
    .hero-visual {
        width: 100%;
    }
    .hero-visual img {
        width: 100%;
    }
    .story-visual {
        margin-inline: auto;
        width: 100%;
    }
}

/* Kleine Displays (z. B. Fold-Außendisplay, 360px): kein Querscrollen, Nav einzeilig */
.angebot-grid > *,
.warum-grid > * {
    min-width: 0;
}

.nav-links a {
    white-space: nowrap;
}

@media (max-width: 420px) {
    .nav .inner {
        gap: 0.8rem;
    }
    .nav .btn-small {
        padding: 0.55em 1em;
        font-size: 0.85rem;
    }
    .nav-links {
        gap: 1.1rem;
    }
    .hero h1 {
        font-size: 1.95rem;
    }
    .hero .section-label {
        letter-spacing: 0.12em;
    }
    .angebot-card,
    .warum-card {
        padding: 1.6rem 1.3rem;
    }
    .angebot-card .btn,
    .hero-cta-row .btn {
        white-space: normal;
        text-align: center;
    }
    .hero-stats .stat b {
        font-size: 1.3rem;
    }
}

/* Sehr schmale Displays (Fold-Außendisplay ≈ 280px): */
.hero-grid > *,
.story-grid > * {
    min-width: 0;
}

@media (max-width: 340px) {
    /* Logo + CTA in einer Zeile, Anker-Links ausblenden (One-Pager, CTA reicht) */
    .nav .inner {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }
    .nav-links {
        display: none;
    }
    .nav-logo {
        font-size: 1.25rem;
    }
    .nav .btn-small {
        padding: 0.5em 0.9em;
        font-size: 0.8rem;
        white-space: nowrap;
    }
    .hero h1 {
        font-size: 1.6rem;
    }
    h2 {
        font-size: 1.5rem;
    }
    .hero .section-label,
    .section-label {
        font-size: 0.75rem;
        letter-spacing: 0.1em;
    }
    .angebot-card,
    .warum-card,
    .method-card {
        padding: 1.3rem 1.1rem;
    }
    .angebot-card h3 {
        font-size: 1.45rem;
    }
    .hero-stats {
        gap: 0.6rem;
    }
    .hero-stats .stat span {
        font-size: 0.9rem;
    }
}