/* =========================================================
   KÖHLING & DR. ALDERMANN
   ZENTRALE RESPONSIVE OPTIMIERUNG

   Breakpoints:
   1050 px = Navigation / Tablet
    768 px = Mobile
    480 px = Small Mobile
   ========================================================= */


/* =========================================================
   BASIS
   ========================================================= */

html {
    -webkit-text-size-adjust: 100%;
}

html,
body {
    max-width: 100%;
}

body {
    overflow-x: clip;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
picture,
video,
canvas,
svg,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}

iframe {
    width: 100%;
}

main,
main section,
main article,
main div {
    min-width: 0;
}


/* =========================================================
   TABLET / MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 1050px) {

    /*
     * Header nicht mehr wie bisher vertikal aufbauen.
     * Logo links, Menü rechts.
     */
    .site-header .header-inner {
        width: min(
            calc(100% - 32px),
            1380px
        ) !important;

        min-height: 78px !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        gap: 16px !important;

        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }


    .site-header .site-logo {
        flex: 0 0 auto;
    }


    .site-header .site-logo img {
        width: 60px !important;
        height: 60px !important;

        object-fit: contain;
    }


    /*
     * Kontaktbutton verschwindet mobil.
     * Kontakt bleibt über Navigation erreichbar.
     */
    .site-header .header-contact {
        display: none !important;
    }


    .ka-primary-navigation {
        margin-left: auto;
    }


    /*
     * Touch-Ziel mindestens 44px.
     */
    .ka-nav-toggle {
        min-width: 48px;
        min-height: 48px;
    }


    /*
     * Langes mobiles Menü soll scrollbar bleiben.
     */
    .ka-nav-panel {
        max-height:
            calc(
                100dvh - 82px
            );

        overflow-y: auto;

        overscroll-behavior: contain;

        -webkit-overflow-scrolling: touch;
    }


    /*
     * Untermenüpunkte etwas größere Touch-Fläche.
     */
    .ka-submenu a {
        min-height: 44px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .container,
    .header-inner {
        width:
            min(
                calc(100% - 36px),
                var(--container, 1380px)
            );
    }


    /*
     * Profilseiten
     */
    .koehling-profile-hero-grid,
    .koehling-profile-two-column,
    .koehling-profile-section-head,
    .koehling-profile-expertise-grid,
    .koehling-profile-contact-grid,

    .aldermann-profile-hero-grid,
    .aldermann-profile-two-column,
    .aldermann-profile-section-head,
    .aldermann-profile-expertise-grid,
    .aldermann-profile-contact-grid {

        grid-template-columns:
            minmax(0, 1fr) !important;

    }


    /*
     * Philosophie
     */
    .philosophie-hero-grid,
    .philosophie-collaboration-grid {

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 45px !important;
    }


    /*
     * Datenschutz
     */
    .privacy-contact-grid,
    .privacy-data-grid {

        grid-template-columns:
            minmax(0, 1fr) !important;

    }


    /*
     * Sticky Seitennavigation auf Tablet/Mobile abschalten.
     */
    .privacy-navigation,
    .ka-decision-document-card {

        position: static !important;

        top: auto !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {


    /* -----------------------------------------------------
       GLOBAL
       ----------------------------------------------------- */

    body {
        font-size: 16px;
        line-height: 1.65;
    }


    .container,
    .header-inner {

        width:
            calc(
                100% - 30px
            ) !important;

        max-width: 100%;
    }


    /*
     * Verhindert Überlauf langer deutscher Wörter wie
     * Verbraucherinsolvenzverfahren.
     */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    strong,
    address {

        overflow-wrap: break-word;
        word-break: normal;
        hyphens: auto;
    }


    h1 {

        font-size:
            clamp(
                38px,
                11vw,
                54px
            ) !important;

        line-height: 1 !important;
        letter-spacing: -0.035em;
    }


    h2 {

        font-size:
            clamp(
                31px,
                8.5vw,
                44px
            ) !important;

        line-height: 1.08 !important;
        letter-spacing: -0.025em;
    }


    h3 {

        font-size:
            clamp(
                22px,
                6vw,
                30px
            );

        line-height: 1.15;
    }


    /*
     * Lange E-Mail-Adressen/Links dürfen umbrechen.
     */
    main a {
        overflow-wrap: anywhere;
    }


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .site-header .header-inner {

        min-height: 72px !important;

        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }


    .site-header .site-logo img {

        width: 56px !important;
        height: 56px !important;
    }


    /*
     * Glass Header bleibt erhalten.
     * Transparenz wird NICHT verändert.
     */
    .site-header.ka-glass-header {
        width: 100%;
    }


    /* -----------------------------------------------------
       HERO GLOBAL
       ----------------------------------------------------- */

    .hero,
    .hero-video {

        min-height: auto !important;
    }


    .hero-video .hero-inner {

        min-height: auto !important;

        padding-top:
            125px !important;

        padding-bottom:
            70px !important;
    }


    /*
     * Diverse Unterseiten-Heros.
     */
    .philosophie-hero-inner {

        min-height: auto !important;

        padding-top:
            125px !important;

        padding-bottom:
            65px !important;
    }


    .philosophie-hero-grid {

        margin-top: 55px !important;
    }


    .philosophie-hero-statement {

        max-width: 100%;
    }


    /*
     * Anwalt-Profile
     */
    .koehling-profile-hero,
    .aldermann-profile-hero {

        padding-top:
            125px !important;

        padding-bottom:
            70px !important;
    }


    .koehling-profile-breadcrumb,
    .aldermann-profile-breadcrumb {

        margin-bottom:
            40px !important;
    }


    /* -----------------------------------------------------
       ALLE HAUPT-GRIDS
       ----------------------------------------------------- */

    /*
     * Auf Smartphones werden Grid-Bereiche im MAIN
     * grundsätzlich gestapelt.
     *
     * Footer und Navigation werden dadurch nicht erfasst.
     */
    main [class$="-grid"] {

        grid-template-columns:
            minmax(0, 1fr) !important;
    }


    /*
     * Bekannte globale Grids aus main.css
     */
    .intro-grid,
    .principles-grid,
    .documents-grid,
    .section-head,
    .service-grid,
    .location-grid,
    .hero-facts-grid {

        grid-template-columns:
            minmax(0, 1fr) !important;
    }


    /* -----------------------------------------------------
       BUTTONS / AKTIONEN
       ----------------------------------------------------- */

    main [class$="-actions"] {

        display: flex;
        flex-wrap: wrap;

        gap: 12px;
    }


    .hero-actions,
    .koehling-profile-contact-actions,
    .aldermann-profile-contact-actions,
    .kanzlei-contact-actions,
    .locations-contact-actions {

        align-items: stretch !important;
    }


    .hero-actions .button,
    .koehling-profile-contact-actions .button,
    .aldermann-profile-contact-actions .button,
    .kanzlei-contact-actions .button,
    .locations-contact-actions .button {

        min-height: 50px;
    }


    /* -----------------------------------------------------
       ANWÄLTE – ÜBERSICHT
       ----------------------------------------------------- */

    /*
     * Profilseiten ausnehmen.
     * Auf der Übersicht Portraits kompakt halten.
     */
    main:not(.koehling-profile):not(.aldermann-profile)
    img[src*="/assets/images/anwaelte/"] {

        display: block !important;

        width:
            min(
                68vw,
                255px
            ) !important;

        max-width: 255px !important;

        height: 315px !important;
        max-height: 315px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        object-fit: cover !important;
        object-position: center top !important;
    }


    /*
     * Falls ein Wrapper eine Desktop-Höhe besitzt.
     */
    @supports selector(:has(*)) {

        main:not(.koehling-profile):not(.aldermann-profile)
        figure:has(
            > img[src*="/assets/images/anwaelte/"]
        ),

        main:not(.koehling-profile):not(.aldermann-profile)
        div:has(
            > img[src*="/assets/images/anwaelte/"]
        ) {

            width: 100% !important;

            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
        }


        main:not(.koehling-profile):not(.aldermann-profile)
        article:has(
            img[src*="/assets/images/anwaelte/"]
        ) {

            height: auto !important;
            min-height: 0 !important;
        }

    }


    /*
     * Profil CTA
     */
    .lawyer-profile-link {

        display: inline-flex;

        align-items: center;

        min-height: 44px;
    }


    /* -----------------------------------------------------
       PROFILSEITEN KÖHLING / ALDERMANN
       ----------------------------------------------------- */

    .koehling-profile-section,
    .aldermann-profile-section {

        padding:
            75px
            0 !important;
    }


    .koehling-profile-two-column,
    .aldermann-profile-two-column {

        gap: 38px !important;
    }


    .koehling-profile-image-wrap,
    .aldermann-profile-image-wrap {

        width:
            min(
                100%,
                390px
            ) !important;

        margin:
            40px
            auto
            25px !important;
    }


    .koehling-profile-image,
    .aldermann-profile-image {

        width: 100% !important;

        height: auto !important;

        aspect-ratio: 3 / 4;

        object-fit: cover;
        object-position: center top;
    }


    .koehling-profile-image-caption,
    .aldermann-profile-image-caption {

        right: 10px !important;
        bottom: -20px !important;

        min-width: 0 !important;

        max-width:
            calc(
                100% - 20px
            );
    }


    .koehling-profile-facts-grid > div,
    .aldermann-profile-facts-grid > div {

        min-height: 0 !important;

        padding:
            32px
            25px !important;

        border-right: 0 !important;
    }


    .koehling-profile-industries,
    .aldermann-profile-industries {

        grid-template-columns:
            minmax(0, 1fr) !important;
    }


    .koehling-profile-industries article,
    .aldermann-profile-industries article {

        min-height: 0 !important;

        padding:
            32px
            24px !important;

        border-right: 0 !important;
    }


    .koehling-profile-expertise-number,
    .aldermann-profile-expertise-number {

        width:
            min(
                220px,
                65vw
            ) !important;

        margin-inline: auto;
    }


    /* -----------------------------------------------------
       PHILOSOPHIE
       ----------------------------------------------------- */

    .philosophie-values-grid {

        grid-template-columns:
            minmax(0, 1fr) !important;
    }


    .philosophie-value-card {

        min-height: 0 !important;

        padding:
            34px
            25px !important;
    }


    .philosophie-value-icon {

        width: 60px !important;
        height: 60px !important;

        margin-bottom: 22px !important;

        font-size: 26px !important;
    }


    .philosophie-collaboration-grid {

        gap: 35px !important;
    }


    /* -----------------------------------------------------
       INSOLVENZVERWALTUNG
       ----------------------------------------------------- */

    .ivz-insolvency-grid {

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 20px !important;
    }


    .ivz-procedure-card {

        min-width: 0 !important;
        min-height: 0 !important;

        padding:
            32px
            24px !important;
    }


    .ivz-procedure-card h3 {

        max-width: 100%;

        font-size:
            clamp(
                25px,
                7vw,
                34px
            ) !important;

        overflow-wrap: anywhere;
    }


    /* -----------------------------------------------------
       STARTSEITE
       ----------------------------------------------------- */

    .hero-facts-grid > div {

        min-height: 0 !important;

        padding:
            28px
            22px !important;
    }


    .intro,
    .services,
    .principles,
    .locations,
    .documents {

        padding:
            75px
            0 !important;
    }


    .service-card {

        min-height: 0 !important;

        padding:
            30px
            24px !important;
    }


    /* -----------------------------------------------------
       FORMULARE
       ----------------------------------------------------- */

    input,
    textarea,
    select,
    button {

        max-width: 100%;
    }


    input,
    textarea,
    select {

        /*
         * 16px verhindert automatisches iOS-Zoomen
         * beim Fokus auf Eingabefelder.
         */
        font-size: 16px !important;
    }


    textarea {

        min-height: 140px;
        resize: vertical;
    }


    /*
     * Formular-Karten und Listen
     */
    .forms-information-list > div {

        min-width: 0;
    }


    /* -----------------------------------------------------
       DATENSCHUTZ
       ----------------------------------------------------- */

    .privacy-address-card,
    .privacy-contact-card {

        min-height: 0 !important;

        padding:
            30px
            24px !important;
    }


    .privacy-data-grid > div {

        min-height: 0 !important;
    }


    /* -----------------------------------------------------
       TABELLEN
       ----------------------------------------------------- */

    .page-content table,
    main table {

        display: block;

        width: 100%;
        max-width: 100%;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }


    /* -----------------------------------------------------
       MAPS / IFRAMES
       ----------------------------------------------------- */

    main iframe {

        width: 100% !important;
        max-width: 100% !important;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .site-footer {

        overflow: hidden;
    }


    .site-footer [class$="-grid"] {

        grid-template-columns:
            minmax(0, 1fr) !important;
    }


    .site-footer .container {

        width:
            calc(
                100% - 30px
            ) !important;
    }

}


/* =========================================================
   KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 480px) {


    .container,
    .header-inner {

        width:
            calc(
                100% - 24px
            ) !important;
    }


    h1 {

        font-size:
            clamp(
                35px,
                11.5vw,
                46px
            ) !important;
    }


    h2 {

        font-size:
            clamp(
                28px,
                9vw,
                38px
            ) !important;
    }


    .site-header .header-inner {

        min-height:
            68px !important;
    }


    .site-header .site-logo img {

        width: 52px !important;
        height: 52px !important;
    }


    .hero-video .hero-inner,
    .philosophie-hero-inner {

        padding-top:
            112px !important;

        padding-bottom:
            58px !important;
    }


    .koehling-profile-hero,
    .aldermann-profile-hero {

        padding-top:
            112px !important;

        padding-bottom:
            58px !important;
    }


    /*
     * Anwaltsportraits nochmals etwas kleiner.
     */
    main:not(.koehling-profile):not(.aldermann-profile)
    img[src*="/assets/images/anwaelte/"] {

        width:
            min(
                66vw,
                225px
            ) !important;

        max-width: 225px !important;

        height: 280px !important;
        max-height: 280px !important;
    }


    /*
     * Actions untereinander
     */
    main [class$="-actions"] {

        flex-direction: column;

        align-items: stretch;
    }


    main [class$="-actions"] .button,
    main [class$="-actions"] > a {

        width: 100%;

        justify-content: center;

        text-align: center;
    }


    .philosophie-value-card,
    .ivz-procedure-card {

        padding:
            28px
            20px !important;
    }


    .koehling-profile-section,
    .aldermann-profile-section {

        padding:
            62px
            0 !important;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}