/* =====================================================================
   Riedler – responsive.css
   IMMER zuletzt laden! Alle Media-Queries hier (Briefing §5).
   Breakpoints: 1480 · 1199 · 900 · 600
   ===================================================================== */

/* --------------- ≤ 1480 px – Large Desktop --------------- */
@media (max-width: 1480px) {
    :root { --container-pad: clamp(20px, 3.5vw, 48px); }
}

/* --------------- ≤ 1199 px – Desktop --------------- */
@media (max-width: 1199px) {
    .hero__inner { padding-block-end: clamp(48px, 7vw, 96px); }
    .hero__headline { font-size: clamp(3rem, 9vw, 7rem); }
    .hero__headline--long { font-size: clamp(2rem, 4.5vw, 4rem); }
}

/* --------------- ≤ 900 px – Tablet / Burger-Nav --------------- */
@media (max-width: 900px) {
    :root { --header-h: 72px; }

    /* text-body mit Video: einspaltig stapeln, Video unter den Text */
    .text-body--has-media .text-body__inner {
        grid-template-columns: 1fr;
    }
    .text-body--has-media .text-body__media { grid-column: 1; grid-row: auto; }
    .text-body__media video { aspect-ratio: 16 / 10; max-height: 60vh; }


    /* Nav-Overlay: ein-spaltig stacken, Submenu inline unter dem Parent */
    .site-nav__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        row-gap: clamp(28px, 5vw, 48px);
    }
    .site-nav__contact { grid-column: 1; align-self: start; }

    .site-nav__link {
        font-size: clamp(1.875rem, 8vw, 2.75rem);
    }

    /* Submenu inline statt absolute-popout — sichtbar nur wenn Nav offen */
    .site-nav__sub-panel {
        position: static;
        padding-inline-start: 0;
        width: auto;
        max-width: none;
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: clamp(20px, 4vw, 32px);
        margin: 8px 0 16px 24px;
        transform: none;
    }
    body.nav-open .site-nav__sub-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Hero — Content unten verankert */
    .hero {
        place-items: end stretch;
    }
    .hero__inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        row-gap: 24px;
        align-content: end;
        padding-block-start: calc(var(--header-h) + 24px);
        padding-block-end: clamp(48px, 10vw, 96px);
    }
    .hero__headline {
        grid-column: 1;
        grid-row: 1;
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        align-items: end;
        font-size: clamp(2.25rem, 9vw, 4rem);
        line-height: 1;
    }
    .hero__headline--long { font-size: clamp(1.75rem, 5.5vw, 2.75rem); }
    .hero__left, .hero__right {
        justify-self: start;
        align-self: end;
    }
    /* einspaltig + linksbündig -> Umbruch-Zeilen ebenfalls links */
    .hero__right { text-align: left; }
    .hero__lead { grid-row: 2; grid-column: 1; }
    .hero__cta  { grid-row: 3; grid-column: 1; justify-self: start; }

    /* Intro */
    .intro__inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
    }
    .intro__headline { grid-column: 1; grid-row: 1; max-width: none; }
    .intro__portrait { grid-column: 1; grid-row: 2; }
    .intro__spark    { grid-column: 1; grid-row: 3; }
    .intro__body     { grid-column: 1; grid-row: 4; }
    .intro__cta      { grid-column: 1; grid-row: 5; justify-self: start; }

    /* Einleitung (Produkte) */
    .intro-products__inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
    }
    .intro-products__headline { grid-column: 1; grid-row: 1; max-width: none; }
    .intro-products__media    { grid-column: 1; grid-row: 2; justify-self: stretch; max-width: none; }
    .intro-products__body     { grid-column: 1; grid-row: 3; align-self: start; }
    .intro-products__cta      { grid-column: 1; grid-row: 4; }

    /* Produkt (System Vorteile) */
    .product-adv {
        grid-template-columns: 1fr;
    }
    .product-adv__visual {
        grid-column: 1;
        grid-row: 1;
        min-height: clamp(300px, 78vw, 460px);
    }
    .product-adv__panel {
        clip-path: polygon(0% 0%, 100% 0%, 100% 82%, 0% 100%);
    }
    .product-adv__media {
        left: 50%;
        bottom: clamp(-32px, -4vw, 0px);
        transform: translateX(-50%);
        width: clamp(220px, 62vw, 380px);
    }
    .product-adv__content {
        grid-column: 1;
        grid-row: 2;
        max-width: none;
    }

    /* Produkt (Downloads) */
    .product-downloads__grid { grid-template-columns: 1fr 1fr; }

    /* Weitere Produkte */
    .more-products__grid { grid-template-columns: 1fr 1fr; }

    /* Image-Band */
    .image-band { min-height: 80vh; }
    .image-band__crop { width: clamp(160px, 40vw, 240px); }
    .image-band__caption { font-size: .8125rem; max-width: 20ch; }

    /* Kamine */
    .kamine__inner { grid-template-columns: 1fr; }
    .kamine__cards { grid-template-columns: 1fr; }
    .kamine__head {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 16px;
    }
    .kamine__tagline { text-align: left; }
    .kamine__cta { justify-self: start; }

    /* Referenz */
    .referenz__head { grid-template-columns: 1fr; }
    .referenz__label { justify-self: start; }
    .referenz-card { flex-basis: 85%; }

    /* About: single-column stack */
    .about__inner {
        grid-template-columns: 1fr;
    }
    .about__col--1,
    .about__col--2 { grid-column: 1; }
    .about__headline { max-width: none; }
    .about__label    { align-self: flex-start; }
    .about__cta      { margin-block-start: clamp(32px, 8vw, 56px); margin-inline-start: var(--container-pad); margin-inline-end: auto; }
    .about__portrait { margin-block-start: clamp(24px, 6vw, 56px); }
    .about__stack    { margin-block-start: clamp(20px, 5vw, 40px); }

    /* Kontakt-CTA */
    .kontakt-cta__inner { grid-template-columns: 1fr; }
    .kontakt-cta__address { align-self: start; }

    /* Footer */
    .site-footer__inner {
        grid-template-columns: 1fr;
        text-align: center;
        row-gap: 12px;
        justify-items: center;
    }
    .site-footer__copy, .site-footer__legal, .site-footer__credit { justify-self: center; }

    /* Kontakt */
    .kontakt__inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
    }
    .kontakt__headline { grid-row: 1; grid-column: 1; font-size: clamp(3rem, 14vw, 5rem); }
    .kontakt__intro    { grid-row: 2; grid-column: 1; justify-items: start; text-align: left; }
    .kontakt__address  { grid-row: 3; grid-column: 1; justify-self: start; text-align: left; transform: none; }
    .kontakt__hours    { grid-row: 4; grid-column: 1; justify-self: start; text-align: left; }
    .kontakt__mark {
        position: absolute;
        inset-inline-start: auto;
        inset-inline-end: var(--container-pad);
        inset-block-end: 230px;
        width: clamp(160px, 35vw, 240px);
        opacity: 1;
    }
}

/* --------------- ≤ 600 px – Mobile --------------- */
@media (max-width: 600px) {
    :root {
        --section-pad-y: clamp(28px, 6vw, 48px);
    }

    body { font-size: 1rem; }

    .hero__headline {
        font-size: clamp(2.75rem, 16vw, 4rem);
        letter-spacing: -.015em;
    }
    .hero__headline--long { font-size: clamp(1.5rem, 8vw, 2.25rem); }
    .hero__scroll { width: 38px; height: 38px; }

    .intro__body,
    .about__body,
    .text-body__copy,
    .lead {
        font-size: 1.0625rem;
    }

    .image-band__body > * { max-width: none; }

    .section-headline { font-size: clamp(1.875rem, 7vw, 2.5rem); }

    .kamine-card__icon { width: 48px; height: 48px; }

    .site-footer__inner { grid-template-columns: 1fr; }
    .site-footer__legal { flex-direction: column; gap: 8px; }

    .product-downloads__grid { grid-template-columns: 1fr; }
    .more-products__grid { grid-template-columns: 1fr; }
}

/* About + Team: Label (Unternehmen / Unser Team) auf Mobil ganz oben */
@media (max-width: 900px) {
    .about .about__inner { display: flex; flex-direction: column; }
    .about .about__col { display: contents; }
    .about .about__label { order: -1; align-self: flex-start; margin-block-end: clamp(8px, 2vw, 16px); }
}

/* Team-Variante „Ihre Ansprechpartner": Portraits auf Mobil kompakt (2026-08-12) */
@media (max-width: 900px) {
    .about--team .about__portrait { margin-block-start: clamp(16px, 4vw, 32px); }
    .about--team .about__portrait img { max-width: 260px; }
}