/* =========================================================
   LA ENGINEERING GMBH
   Responsive Design
   ========================================================= */


/* =========================================================
   1. STANDARD: MOBILE FIRST
   ========================================================= */

:root {
    --container-padding: 1rem;
    --header-height: 4.5rem;
}

.section {
    padding-block: var(--space-8);
}

.section--compact {
    padding-block: var(--space-7);
}

.section--large {
    padding-block: var(--space-10);
}

.section-heading {
    margin-bottom: var(--space-7);
}

.section-heading__text {
    font-size: var(--font-size-base);
}

.grid--2,
.grid--3,
.grid--4 {
    grid-template-columns: 1fr;
}

.btn {
    min-height: 3.25rem;
    padding-inline: 1.25rem;
}

.card {
    padding: var(--space-5);
}


/* =========================================================
   2. KLEINE SMARTPHONES
   bis 479 px
   ========================================================= */

@media (max-width: 29.9375rem) {
    h1 {
        font-size: clamp(2.25rem, 12vw, 3.25rem);
    }

    h2 {
        font-size: clamp(1.85rem, 9vw, 2.5rem);
    }

    h3 {
        font-size: clamp(1.35rem, 7vw, 1.8rem);
    }

    .btn {
        width: 100%;
    }

    .section-heading__title {
        max-width: 100%;
    }

    .card {
        border-radius: var(--radius-md);
    }

    .glass-panel {
        border-radius: var(--radius-lg);
    }
}


/* =========================================================
   3. GROSSE SMARTPHONES
   ab 480 px
   ========================================================= */

@media (min-width: 30rem) {
    :root {
        --container-padding: 1.25rem;
    }

    .btn {
        width: auto;
    }
}


/* =========================================================
   4. TABLETS
   ab 768 px
   ========================================================= */

@media (min-width: 48rem) {
    :root {
        --container-padding: 2rem;
        --header-height: 5rem;
    }

    .section {
        padding-block: var(--space-10);
    }

    .section--compact {
        padding-block: var(--space-8);
    }

    .section--large {
        padding-block: var(--space-11);
    }

    .section-heading {
        margin-bottom: var(--space-8);
    }

    .section-heading__text {
        font-size: var(--font-size-md);
    }

    .grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid--3,
    .grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid {
        gap: var(--space-6);
    }

    .card {
        padding: var(--space-6);
    }

    .btn {
        min-height: 3rem;
    }
}


/* =========================================================
   5. KLEINE DESKTOPS
   ab 1024 px
   ========================================================= */

@media (min-width: 64rem) {
    :root {
        --container-padding: 2.5rem;
    }

    .section {
        padding-block: var(--space-11);
    }

    .section--compact {
        padding-block: var(--space-9);
    }

    .section--large {
        padding-block: var(--space-12);
    }

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

    .grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .card:hover {
        transform: translateY(-5px);
    }
}


/* =========================================================
   6. GROSSE DESKTOPS
   ab 1280 px
   ========================================================= */

@media (min-width: 80rem) {
    :root {
        --container-padding: 3rem;
    }

    .section-heading {
        margin-bottom: var(--space-9);
    }

    .grid {
        gap: var(--space-7);
    }
}


/* =========================================================
   7. SEHR GROSSE BILDSCHIRME
   ab 1600 px
   ========================================================= */

@media (min-width: 100rem) {
    :root {
        --container-width: 80rem;
        --container-wide: 92rem;
    }
}


/* =========================================================
   8. TOUCH-GERÄTE
   ========================================================= */

@media (hover: none) and (pointer: coarse) {
    .btn,
    .card__link,
    a,
    button {
        min-height: 2.75rem;
    }

    .card:hover,
    .btn:hover {
        transform: none;
    }
}


/* =========================================================
   9. DRUCKANSICHT
   ========================================================= */

@media print {
    *,
    *::before,
    *::after {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    body {
        background: var(--color-white);
        color: #000000;
        font-size: 11pt;
    }

    a {
        color: #000000;
        text-decoration: underline;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
    }

    .btn,
    .skip-link,
    nav,
    footer,
    form {
        display: none !important;
    }

    .section {
        padding-block: 1.5rem;
    }

    .container,
    .container--wide,
    .container--text {
        width: 100%;
        max-width: none;
    }
}


/* =========================================================
   HEADER UND HERO – RESPONSIVE
   ========================================================= */

@media (max-width: 74.9375rem) {
    .site-navigation__list {
        gap: 1.1rem;
    }

    .site-header__request {
        display: none;
    }

    .hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(27rem, 0.95fr);
    }

    .hero__content {
        padding-right: var(--space-7);
    }

    .hero-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-5) 0;
    }

    .hero-trust__item:nth-child(2) {
        border-right: 0;
    }

    .hero-trust__item:nth-child(3) {
        padding-left: 0;
    }
}


@media (max-width: 63.9375rem) {
    .site-navigation {
        position: fixed;
        top: var(--header-height);
        right: 0;
        left: 0;

        display: block;

        padding: var(--space-5) var(--container-padding);
        border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);

        background-color: rgba(255, 255, 255, 0.99);
        box-shadow: var(--shadow-md);

        opacity: 0;
        visibility: hidden;
        transform: translateY(-1rem);

        transition:
            opacity var(--transition-base),
            visibility var(--transition-base),
            transform var(--transition-base);
    }

    .site-navigation.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .site-navigation__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-navigation__link {
        width: 100%;
        padding: var(--space-4);
        border-bottom: 1px solid var(--color-border);
    }

    .site-navigation__list li:last-child .site-navigation__link {
        border-bottom: 0;
    }

    .site-header__phone {
        margin-left: auto;
    }

    .menu-toggle {
        display: flex;
    }

    .hero {
        min-height: auto;
    }

    .hero__inner {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hero__content {
        padding:
            var(--space-10)
            0
            var(--space-8);
    }

    .hero__title {
        max-width: 12ch;
        font-size: clamp(2.8rem, 7vw, 4.5rem);
    }

    .hero__visual {
        min-height: 32rem;

        clip-path: polygon(
            0 10%,
            25% 0,
            100% 0,
            100% 100%,
            0 100%
        );
    }

    .hero__image {
        min-height: 32rem;
    }
}


@media (max-width: 47.9375rem) {
    .site-logo {
        width: 11.5rem;
    }

    .site-header__phone {
        width: 3rem;
        min-width: 3rem;
        padding: 0;
    }

    .site-header__phone span {
        display: none;
    }

    .site-header__whatsapp {
        width: 3rem;
        min-width: 3rem;
        padding: 0;
    }

    .site-header__whatsapp span {
        display: none;
    }

    .hero__content {
        padding-top: var(--space-9);
    }

    .hero__eyebrow {
        margin-bottom: var(--space-4);
    }

    .hero__title {
        max-width: 100%;
        font-size: clamp(1.85rem, 9.3vw, 3rem);
    }

    .hero__description {
        font-size: var(--font-size-base);
    }

    .hero__actions {
        flex-direction: column;
    }

    .hero__button {
        width: 100%;
    }

    .hero-trust {
        grid-template-columns: 1fr 1fr;
        margin-top: var(--space-8);
    }

    .hero-trust__item {
        justify-content: center;

        padding-inline: var(--space-3);
    }

    .hero-trust__content strong {
        font-size: var(--font-size-sm);
    }

    .hero__visual {
        min-height: 25rem;
    }

    .hero__image {
        min-height: 25rem;
        object-position: 60% center;
    }

    /* Sicherheitsnetz gegen über den Rand hinauslaufende Wörter -- greift
       nur im Ausnahmefall, da die Schriftgrößen unten so gewählt sind,
       dass Wörter regulär an Leerzeichen umbrechen, nicht mitten im Wort. */
    h1, h2, h3, h4, p {
        overflow-wrap: break-word;
    }

    /* Hero-Text auf Mobilgeräten zentrieren (Desktop bleibt unverändert
       linksbündig, zweispaltig neben dem Foto). */
    .hero__content {
        align-items: center;
        text-align: center;
    }

    .hero__actions {
        justify-content: center;
    }

    /* "Warum LA Engineering"-Intro auf Mobilgeräten zentrieren (Desktop
       bleibt unverändert linksbündig neben dem Kartenraster). */
    .advantages-section__intro {
        text-align: center;
    }

    .advantages-section__eyebrow {
        justify-content: center;
    }
}


@media (max-width: 29.9375rem) {
    .site-logo {
        width: 9.5rem;
    }

    /* Die vier Zeilen als gemeinsames zweispaltiges Raster anordnen
       (Icon-Spalte | Text-Spalte), statt jede Zeile einzeln zu
       zentrieren -- so stehen alle Icons exakt untereinander. */
    .hero-trust {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: var(--space-4);
        row-gap: var(--space-4);

        width: fit-content;
        margin-inline: auto;
    }

    .hero-trust__item {
        display: contents;
    }

    .hero-trust__icon {
        align-self: center;
    }

    .hero-trust__content {
        text-align: left;
    }
}

/* =========================================================
   LEISTUNGEN – RESPONSIVE
   ========================================================= */

@media (max-width: 79.9375rem) {
    .services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-5);
    }

    .service-card {
        min-height: 17rem;
    }

    .service-card__link {
        opacity: 1;
        transform: none;
    }
}


@media (max-width: 47.9375rem) {
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
    }

    .service-card {
        min-height: 16.5rem;
        padding:
            var(--space-5)
            var(--space-4);
    }

    .service-card__icon {
        width: 3.25rem;
        height: 3.25rem;
    }
}


@media (max-width: 35.9375rem) {
    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: auto;
    }

    .service-card__icon {
        margin-bottom: var(--space-3);
    }

    .service-card__text {
        max-width: 34rem;
    }

    .services-section__button {
        width: 100%;
    }
}


/* =========================================================
   ABLAUF – RESPONSIVE
   ========================================================= */

@media (max-width: 63.9375rem) {
    .process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:
            var(--space-9)
            var(--space-6);
    }

    .process__line {
        display: none;
    }

    .process-step__text {
        max-width: 20rem;
    }
}


@media (max-width: 35.9375rem) {
    .process-section__heading {
        margin-bottom: var(--space-7);
    }

    .process {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .process-step {
        display: grid;
        grid-template-columns: 4.75rem minmax(0, 1fr);
        grid-template-areas:
            "icon title"
            "icon text";
        align-items: start;
        column-gap: var(--space-4);

        padding: var(--space-5);

        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);

        background-color: var(--color-white);
        box-shadow: var(--shadow-xs);

        text-align: left;
    }

    .process-step__number {
        top: 0.65rem;
        left: 0.65rem;

        width: 1.55rem;
        height: 1.55rem;

        border-width: 2px;

        font-size: 0.68rem;
    }

    .process-step__icon {
        grid-area: icon;

        width: 4.75rem;
        height: 4.75rem;
        margin-bottom: 0;
    }

    .process-step__icon svg {
        width: 1.9rem;
        height: 1.9rem;
    }

    .process-step__title {
        grid-area: title;

        margin-top: var(--space-2);
        margin-bottom: var(--space-2);
    }

    .process-step__text {
        grid-area: text;

        max-width: none;
    }
}


/* =========================================================
   WARUM LA ENGINEERING – RESPONSIVE
   ========================================================= */

@media (max-width: 69.9375rem) {
    .advantages-section__container {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .advantages-section__intro {
        max-width: 42rem;
    }
}


@media (max-width: 47.9375rem) {
    .advantages-grid {
        grid-template-columns: 1fr;
    }

    .advantage-card {
        align-items: center;

        min-height: auto;

        text-align: center;
    }
}


@media (max-width: 35.9375rem) {
    .advantages-section__title {
        font-size: clamp(2.2rem, 12vw, 3rem);
    }

    .advantages-section__text {
        font-size: 0.94rem;
    }

    .advantages-section__button {
        width: 100%;
    }

    .advantage-card {
        padding: var(--space-5);
    }
}

/* =========================================================
   MARKENCLAIM UND UNSER VERSPRECHEN – RESPONSIVE
   ========================================================= */

@media (max-width: 63.9375rem) {
    .promise-card--featured {
        grid-template-columns: 1fr;
        align-items: start;
        min-height: auto;
    }

    .promise-card__signature {
        margin-top: var(--space-3);
    }
}

@media (max-width: 47.9375rem) {
    .brand-claim {
        padding-block: 6.5rem;
    }

    .brand-claim__title {
        font-size: clamp(2.8rem, 13vw, 5rem);
    }

    .promise-grid {
        grid-template-columns: 1fr;
    }

    .promise-card--featured {
        grid-column: auto;
    }

    .promise-card {
        min-height: auto;
    }

    /* Überschrift und beide Kartentypen zentrieren (Desktop bleibt
       linksbündig, hier stehen sie unverändert neben dem Kartenraster). */
    .promise-section__heading {
        margin-inline: auto;

        text-align: center;
    }

    .promise-card {
        align-items: center;

        text-align: center;
    }

    .promise-card--featured {
        justify-items: center;

        text-align: center;
    }

    .promise-card__signature {
        padding-top: var(--space-6);
    }

    .promise-card__signature::before {
        left: 50%;

        transform: translateX(-50%);
    }
}

@media (max-width: 35.9375rem) {
    .brand-claim__title {
        letter-spacing: -0.045em;
    }

    .brand-claim__text {
        max-width: 28rem;
        font-size: 0.95rem;
    }

    .promise-section__title {
        font-size: clamp(2.25rem, 12vw, 3.3rem);
    }

    .promise-card,
    .promise-card--featured {
        padding: var(--space-6);
        border-radius: var(--radius-lg);
    }

    .promise-card__featured-title {
        font-size: clamp(2rem, 10vw, 3.1rem);
    }
}

@media (hover: none) and (pointer: coarse) {
    .promise-card:hover {
        transform: none;
    }
}


/* =========================================================
   FAQ – RESPONSIVE
   ========================================================= */

@media (max-width: 47.9375rem) {
    .faq-item__question {
        padding: var(--space-4) var(--space-5);
        font-size: var(--font-size-base);
    }

    .faq-item__answer {
        padding: 0 var(--space-5) var(--space-4);
    }
}


/* =========================================================
   KONTAKT – RESPONSIVE
   ========================================================= */

@media (max-width: 63.9375rem) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 35.9375rem) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-info,
    .contact-form-card {
        padding: var(--space-5);
    }

    .contact-map iframe {
        height: 18rem;
    }
}


/* =========================================================
   FOOTER – RESPONSIVE
   ========================================================= */

@media (max-width: 63.9375rem) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        row-gap: var(--space-8);
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 35.9375rem) {
    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-col {
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;

        text-align: center;
    }

    .footer-legal {
        justify-content: center;
    }
}


/* =========================================================
   LEISTUNGEN (DETAILSEITE) – RESPONSIVE
   ========================================================= */

@media (max-width: 47.9375rem) {
    .service-detail {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}


/* =========================================================
   ÜBER UNS – RESPONSIVE
   ========================================================= */

@media (max-width: 63.9375rem) {
    .qualification-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .founder-profile {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .founder-profile__photo-wrap {
        max-width: 16rem;
        margin-inline: auto;
    }

    .founder-profile__text {
        margin-inline: auto;
    }
}

@media (max-width: 47.9375rem) {
    .values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 35.9375rem) {
    .values-grid {
        grid-template-columns: 1fr;
    }
}