/* =============================================================
   RESPONSIVE.CSS — Breakpoint-Anpassungen
   Katharina Langguth | Fast, aber nie ganz

   Breakpoints:
   – 1200px: Container-Einschränkungen
   – 1024px: Zweispaltige Layouts wechseln zu einspaltigen
   –  768px: Mobile-Navigation, kompakte Abstände
   –  480px: Kleinste Bildschirme
   ============================================================= */


/* ─── 1200px ─────────────────────────────────────────────── */

@media (max-width: 1200px) {
    .split__content {
        padding-inline: var(--sp-6);
    }
}


/* ─── 1024px ─────────────────────────────────────────────── */

@media (max-width: 1024px) {
    /* Split-Sektion: einspaltiges Layout */
    .split {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .split__cover {
        padding-block: var(--sp-7);
        padding-inline: var(--sp-5);
    }

    .split__cover img {
        max-width: 300px;
    }

    .split__content {
        padding: var(--sp-7) var(--sp-5);
    }

    /* Autorin-Sektion: einspaltiges Layout */
    .author__grid {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
        text-align: center;
    }

    .author__photo-wrap {
        max-width: 320px;
        margin-inline: auto;
    }

    /* Kaufen / BoD: einspaltiges Layout */
    .purchase__inner {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
        text-align: center;
    }

    .purchase__cover {
        max-width: 260px;
        margin-inline: auto;
    }

    .purchase__desc {
        margin-inline: auto;
    }
}


/* ─── 768px ──────────────────────────────────────────────── */

@media (max-width: 768px) {
    /* CSS-Variable anpassen */
    :root {
        --container-px: 1.5rem;
        --nav-height:   60px;
    }

    /* Navigation */
    .nav {
        padding-inline: var(--sp-3);
    }

    /* Hero */
    .hero {
        padding-top: var(--sp-7);
    }

    .hero__book-bg {
        display: none; /* Dekoratives Bild auf Mobile ausblenden */
    }

    .hero__scroll-hint {
        display: none;
    }

    /* About */
    .about {
        padding-block: var(--sp-7);
    }

    .book-features__item {
        grid-template-columns: 55px 1fr;
        gap: var(--sp-3);
        padding-block: var(--sp-4);
    }

    /* Statement */
    .statement {
        padding-block: var(--sp-7);
    }

    /* Autorin */
    .author {
        padding-block: var(--sp-7);
    }

    /* Testimonials */
    .testimonials {
        padding-block: var(--sp-7);
    }

    .testimonial {
        padding-block: var(--sp-5);
    }

    /* Leseprobe */
    .sample {
        padding-block: var(--sp-7);
    }

    /* Kaufen */
    .purchase {
        padding-block: var(--sp-7);
    }

    /* Feedback */
    .feedback {
        padding-block: var(--sp-7);
    }

    .feedback-form__submit {
        align-self: stretch;
        text-align: center;
    }

    /* Footer */
    .site-footer {
        padding-block: var(--sp-6) var(--sp-4);
    }
}


/* ─── 480px ──────────────────────────────────────────────── */

@media (max-width: 480px) {
    /* Nav */
    .nav__logo {
        font-size: 0.62rem;
    }

    .nav__cta {
        padding: 0.55rem 1.2rem;
        font-size: 0.75rem;
    }

    /* Hero – Titel-Scaling */
    .hero__title {
        font-size: clamp(3.2rem, 16vw, 5rem);
    }

    /* About */
    .about {
        padding-block: var(--sp-6);
    }

    .book-features__item {
        grid-template-columns: 40px 1fr;
        gap: var(--sp-2);
    }

    /* Statement */
    .statement__text {
        font-size: clamp(2rem, 9vw, 4rem);
    }

    /* Footer-Buchstabe etwas kleiner */
    .site-footer__letter {
        font-size: clamp(8rem, 22vw, 14rem);
    }
}


/* ─── Druckansicht (optional) ────────────────────────────── */

@media print {
    .site-header,
    .hero__book-bg,
    .hero__scroll-hint,
    .statement__cta,
    .feedback,
    .site-footer__letter {
        display: none;
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    a::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
        color: #555;
    }
}