/* Alutech Relaunch 3.2.16
 * Mobile Responsive QA fuer 320, 360, 390 und 430 CSS-Pixel.
 *
 * Diese Schicht korrigiert ausschliesslich nachgewiesene mobile Ueberlaeufe.
 * Desktop-Header, Sticky-Zustand, Topbar-Aufbau, Static Blocks, Navigation,
 * Seiteninhalte, Formulare und der Konfigurator werden nicht neu importiert.
 */

@media (max-width: 767px) {
    html,
    body.rank1-alutech-page {
        max-width: 100%;
        overflow-x: clip;
    }

    /* Grid- und Flex-Kinder duerfen auf die verfuegbare Breite schrumpfen. */
    body.rank1-alutech-page :is(
        .elementor,
        .elementor-element,
        .elementor-widget,
        .elementor-widget-container,
        .e-con,
        .e-con-inner,
        .wrap,
        .section-head,
        .intro-grid,
        .split,
        .content-grid,
        .contact-grid,
        .cta-grid,
        .service-intro-grid,
        .service-specs-grid,
        .service-usecases-grid,
        .service-faq-grid,
        .service-contact-strip,
        .catalog-row,
        .info-card,
        .method-card,
        .service-card,
        .related-grid > a,
        .resource-card,
        .department-grid > article,
        .download-grid > article,
        .portal-layout,
        .portal-login,
        .portal-preview,
        .portal-modules > article,
        .legal-layout,
        .legal-copy,
        .commerce-shell-grid,
        .commerce-placeholder,
        .configurator-layout,
        .configurator-steps,
        .config-step,
        .rank1-live-configurator,
        .rank1-kantteil__layout,
        .rank1-kantteil__step,
        .rank1-kantteil__summary,
        .rank1-form-section-copy-column,
        .rank1-form-section-form-column,
        .gform_wrapper,
        .gfield
    ) {
        min-width: 0;
        max-width: 100%;
    }

    /* Lange deutsche Fachbegriffe, Mailadressen und Dateinamen bleiben im
     * sichtbaren Bereich. Automatische deutsche Trennung hat Vorrang; das
     * Anywhere-Fallback greift nur, wenn der Browser kein Trennmuster kennt. */
    body.rank1-alutech-page :is(main, #main, #content, .site-content, .elementor-location-footer) :is(
        h1,
        h2,
        h3,
        h4,
        p,
        li,
        dt,
        dd,
        label,
        legend,
        a,
        button,
        strong
    ),
    body.rank1-alutech-page :is(
        .page-hero h1,
        .hero h1,
        .section-head h2,
        .intro-grid h2,
        .split-copy h2,
        .service-intro-grid h2,
        .service-specs-copy h2,
        .service-usecases-copy h2,
        .service-faq-intro h2,
        .service-process h2,
        .service-contact-strip h2,
        .project-prompt h2,
        .conversion-proof h2,
        .cta-grid h2,
        .shop-intro h2,
        .configurator-heading h2,
        .commerce-placeholder h2,
        .contact-choice-panel h2,
        .person-feature h2,
        .portal-login h2,
        .portal-preview h2,
        .legal-copy h2,
        .legal-copy h3,
        .form-preview h2,
        .rank1-form-section-copy h2,
        .service-card h3,
        .method-card h3,
        .info-card h3,
        .resource-card h3,
        .department-grid h3,
        .download-grid h3,
        .related-grid strong,
        .catalog-row strong,
        .breadcrumbs span,
        .btn,
        .text-link,
        .contact-box a,
        .cta-contact a,
        .footer-contact-link,
        .rank1-kantteil__step legend strong,
        .rank1-kantteil__step legend small,
        .rank1-kantteil__summary dt,
        .rank1-kantteil__summary dd,
        .gform_wrapper .gfield_label,
        .gform_wrapper .gform-field-label,
        .gform_wrapper .gf_step_label,
        a[href^="mailto:"]
    ) {
        max-width: 100%;
        white-space: normal;
        word-break: normal;
        overflow-wrap: anywhere;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    /* Mit dem live geladenen Inter-Font vermessen: 9vw haelt selbst
     * "Unterkonstruktionen" bei 320 bis 430 px innerhalb des 90vw-Wrappers. */
    body.rank1-alutech-page .page-hero h1 {
        max-width: 100%;
        font-size: clamp(29px, 9vw, 40px);
        line-height: 1.06;
        letter-spacing: -.025em;
    }

    body.rank1-alutech-page .hero h1 {
        max-width: 100%;
        font-size: clamp(32px, 9.8vw, 43px);
        line-height: 1.04;
        letter-spacing: -.03em;
    }

    /* Die beiden laengsten ungetrennten Seitentitel erhalten eine eigene,
     * berechnete Obergrenze und bleiben dadurch auf einer sauberen Wortzeile. */
    body.rank1-route-allgemeine-geschaeftsbedingungen .page-hero h1,
    body.rank1-route-datenschutzerklaerung .page-hero h1 {
        font-size: clamp(26px, 8.35vw, 36px);
    }

    /* "CNC-Abkanten" ist trotz Bindestrich breiter als die uebrigen Service-H1. */
    body.rank1-route-service--sonderkantteile .page-hero h1 {
        font-size: clamp(27px, 8.5vw, 36px);
    }

    body.rank1-alutech-page :is(
        .section-head h2,
        .intro-grid h2,
        .split-copy h2,
        .service-intro-grid h2,
        .service-specs-copy h2,
        .service-usecases-copy h2,
        .service-faq-intro h2,
        .service-process h2,
        .service-contact-strip h2,
        .project-prompt h2,
        .conversion-proof h2,
        .cta-grid h2,
        .shop-intro h2,
        .configurator-heading h2,
        .commerce-placeholder h2,
        .contact-choice-panel h2,
        .person-feature h2,
        .portal-login h2,
        .portal-preview h2,
        .rank1-form-section-copy h2
    ) {
        font-size: clamp(28px, 8.7vw, 38px);
        line-height: 1.1;
    }

    body.rank1-alutech-page .legal-copy h2 {
        font-size: clamp(25px, 7.8vw, 31px);
        line-height: 1.16;
    }

    body.rank1-alutech-page .legal-copy h3 {
        font-size: clamp(20px, 6.2vw, 24px);
        line-height: 1.24;
    }

    body.rank1-alutech-page .breadcrumbs {
        display: flex;
        max-width: 100%;
        gap: 5px 8px;
        align-items: flex-start;
        flex-wrap: wrap;
        line-height: 1.45;
    }

    body.rank1-alutech-page .breadcrumbs > * {
        min-width: 0;
    }

    body.rank1-alutech-page .breadcrumbs > span:last-child {
        flex: 1 1 180px;
    }

    body.rank1-alutech-page :is(.btn, .text-link) {
        min-width: 0;
        text-align: center;
    }

    body.rank1-alutech-page :is(input, select, textarea, button) {
        min-width: 0;
        max-width: 100%;
    }

    body.rank1-alutech-page img,
    body.rank1-alutech-page svg {
        max-width: 100%;
    }

    body.rank1-alutech-page a[href^="tel:"] {
        white-space: nowrap;
        word-break: normal;
        overflow-wrap: normal;
        -webkit-hyphens: none;
        hyphens: none;
    }

    body.rank1-route-kantteile-online-bestellen :is(
        .rank1-kantteil__profiles,
        .rank1-kantteil__materials,
        .rank1-kantteil__finishes,
        .rank1-kantteil__geometry,
        .rank1-kantteil__fields,
        .rank1-kantteil__actions
    ) > * {
        min-width: 0;
        max-width: 100%;
    }

    body.rank1-route-kantteile-online-bestellen .rank1-kantteil__profiles button strong,
    body.rank1-route-kantteile-online-bestellen .rank1-kantteil__finishes label,
    body.rank1-route-kantteile-online-bestellen .rank1-kantteil__materials button {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body .gform_wrapper form.rank1-gform .gf_page_steps,
    body .gform_wrapper form.rank1-gform .gf_step {
        min-width: 0;
        max-width: 100%;
    }

    body .gform_wrapper form.rank1-gform .gf_step_label {
        min-width: 0;
        line-height: 1.2;
        text-align: center;
    }

    body .elementor-location-footer :is(
        .rank1-footer-contact-card,
        .rank1-footer-contact-copy,
        .rank1-footer-contact-copy strong,
        .rank1-footer-contact-cta,
        .rank1-footer-columns .elementor-widget-container,
        .rank1-footer-legal-links
    ) {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

/* Der vorhandene 174-px-Header bleibt ab 363 px exakt unveraendert. Nur auf
 * 320/360-px-Geraeten darf er proportional schrumpfen, statt zu ueberlaufen. */
@media (max-width: 362px) {
    body .elementor-location-header .rank1-header-main-inner {
        min-width: 0;
        padding-inline: 12px;
        gap: 8px;
    }

    body .elementor-location-header .rank1-header-logo-stack,
    body .elementor-location-header .rank1-header-logo-stack .elementor-widget-image,
    body .elementor-location-header .rank1-header-logo-stack img {
        width: min(174px, 48vw);
        max-width: 48vw;
    }

    body .elementor-location-header .rank1-header-logo-stack {
        flex-basis: min(174px, 48vw);
    }

    body .elementor-location-header .rank1-header-mobile-nav {
        min-width: 0;
        max-width: 45vw;
    }

    body .elementor-location-header .rank1-header-mobile-nav .elementor-button {
        min-width: 0;
        max-width: 100%;
        padding-inline: 12px;
        white-space: normal;
    }

    body .elementor-location-header .rank1-header-topbar-inner {
        padding-inline: 8px;
    }

    body .elementor-location-header .rank1-utility-contact {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 4px;
    }

    body .elementor-location-header .rank1-utility-contact > a {
        min-width: 0;
        padding-inline: 5px;
        justify-content: center;
        font-size: clamp(11px, 3.45vw, 12.5px);
    }

    body .elementor-location-header .rank1-utility-contact > a strong {
        font-size: inherit;
    }

    body .elementor-location-header .rank1-utility-contact .rank1-utility-configurator {
        margin-left: 0;
        text-align: center;
        white-space: normal;
        line-height: 1.15;
    }

    body .elementor-location-header .rank1-header-utility svg {
        width: 14px;
        height: 14px;
        margin-right: 5px;
        flex-basis: 14px;
    }
}