/* ==========================================================
   UROANDRO.DE – FINAL RESPONSIVE LAYER
   Wird bewusst als LETZTE CSS-Datei geladen.
   Desktop >= 1201px bleibt weitgehend unverändert.
========================================================== */

html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

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

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

img {
    height: auto;
}

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

table {
    width: 100%;
    max-width: 100%;
}

input,
textarea,
select,
button {
    max-width: 100%;
    font: inherit;
}


/* ==========================================================
   FLUID TYPOGRAFIE
========================================================== */

.hero-editorial-copy h1,
.hero-editorial h1 {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

.section-title,
.practice-hours-heading,
.doctors-section h2,
.services h2 {
    overflow-wrap: normal;
    word-break: normal;
}


/* ==========================================================
   BILDER / KARTEN
========================================================== */

.doctor-card,
.practice-hours-card,
.service-card,
.quick-info-item {
    min-width: 0;
    max-width: 100%;
}

.doctor-image,
.doctor-card img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}


/* ==========================================================
   TABLET – BIS 1200px
========================================================== */

@media (max-width: 1200px) {

    .hero-editorial-inner,
    .practice-header-inner,
    .section,
    .welcome-grid,
    .doctors-section,
    .services,
    .contact-cta-inner {
        width: min(100%, 1100px);
        max-width: 100%;
    }

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

    .footer-grid,
    .uim-v3-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 28px !important;
    }
}


/* ==========================================================
   TABLET / KLEINER LAPTOP – BIS 900px
========================================================== */

@media (max-width: 900px) {

    body {
        overflow-x: hidden;
    }

    .hero-editorial-inner,
    .practice-header-inner,
    .welcome-grid,
    .practice-hours-grid,
    .doctor-grid,
    .service-grid,
    .quick-info-grid,
    .contact-cta-inner,
    .footer-grid,
    .uim-v3-footer-grid {
        max-width: 100% !important;
    }

    .hero-editorial-copy {
        width: min(100%, 580px) !important;
        max-width: 100% !important;
    }

    .hero-editorial-copy h1,
    .hero-editorial h1 {
        font-size: clamp(3rem, 7.3vw, 5rem) !important;
        line-height: .98 !important;
        max-width: 12ch !important;
    }

    .practice-hours-grid,
    .doctor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }

    .welcome-grid {
        grid-template-columns: 1fr !important;
        gap: 26px !important;
    }

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

    .contact-cta-inner {
        gap: 24px !important;
    }

    .contact-cta-actions {
        flex-wrap: wrap !important;
    }
}


/* ==========================================================
   HANDY – BIS 700px
========================================================== */

@media (max-width: 700px) {

    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .hero-editorial,
    .hero-editorial-background {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-editorial-inner {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .hero-editorial-copy {
        width: 100% !important;
        max-width: 500px !important;
    }

    .hero-editorial-copy h1,
    .hero-editorial h1 {
        font-size: clamp(2.65rem, 11.5vw, 4.1rem) !important;
        line-height: .96 !important;

        max-width: 11ch !important;

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

        overflow-wrap: normal !important;
        word-break: keep-all !important;
        hyphens: none !important;
    }

    .quick-info-grid {
        grid-template-columns: 1fr !important;
    }

    .quick-info-item {
        width: 100% !important;
        min-height: 72px;
    }

    .practice-header-inner,
    .practice-hours,
    .doctors-section,
    .services,
    .welcome-grid,
    .contact-cta-inner {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .practice-hours-grid,
    .doctor-grid,
    .welcome-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .practice-hours-card,
    .doctor-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .doctor-card img,
    .doctor-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        object-fit: cover;
    }

    .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
    }

    .service-card {
        width: auto !important;
        min-width: 0 !important;
    }

    .contact-cta-inner {
        grid-template-columns: 1fr !important;
        text-align: left;
    }

    .contact-cta-actions {
        width: 100%;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    .footer-grid,
    .uim-v3-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

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

        gap: 24px 18px !important;
    }

    .footer-bottom,
    .uim-v3-footer-bottom {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 10px !important;

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

    .footer-contact-links,
    .footer-accessibility-tools {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 14px;
    }
}


/* ==========================================================
   KLEINES HANDY – BIS 520px
========================================================== */

@media (max-width: 520px) {

    .hero-editorial-inner {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .hero-editorial-copy h1,
    .hero-editorial h1 {
        font-size: clamp(2.35rem, 12vw, 3.5rem) !important;
        max-width: 10.5ch !important;
    }

    .practice-header-inner,
    .practice-hours,
    .doctors-section,
    .services,
    .welcome-grid,
    .contact-cta-inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .service-grid {
        grid-template-columns: 1fr !important;
    }

    .footer-grid,
    .uim-v3-footer-grid {
        grid-template-columns: 1fr !important;
    }

    .contact-cta-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .contact-cta-actions a,
    .contact-cta-actions button {
        width: 100% !important;
        text-align: center !important;
    }
}


/* ==========================================================
   SEHR KLEINES HANDY – BIS 380px
========================================================== */

@media (max-width: 380px) {

    .hero-editorial-copy h1,
    .hero-editorial h1 {
        font-size: 2.2rem !important;
    }

    .practice-header-inner,
    .practice-hours,
    .doctors-section,
    .services,
    .welcome-grid,
    .contact-cta-inner {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }
}


/* UROANDRO-MOBILE-V2-START */

@media (max-width: 600px) {

    /* =====================================================
       GRUNDLAYOUT
    ===================================================== */

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        min-width: 0 !important;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero-editorial {
        position: relative !important;
        width: 100% !important;
        min-height: 430px !important;
        overflow: hidden !important;
    }

    .hero-editorial-background {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        background-position: center center !important;
        background-size: cover !important;
    }

    .hero-editorial-inner {
        position: relative !important;
        z-index: 3 !important;

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

        min-height: 430px !important;

        padding:
            42px
            20px
            36px !important;

        display: flex !important;
        align-items: flex-start !important;
    }

    .hero-editorial-inner::before {
        content: "" !important;

        position: absolute !important;
        z-index: -1 !important;

        inset: 0 !important;

        background:
            linear-gradient(
                90deg,
                rgba(255,248,225,.84) 0%,
                rgba(255,248,225,.64) 39%,
                rgba(255,248,225,.10) 72%,
                rgba(255,248,225,0) 100%
            ) !important;

        pointer-events: none !important;
    }

    .hero-editorial-copy {
        width: 100% !important;
        max-width: 350px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .hero-editorial-copy h1,
    .hero-editorial h1 {
        width: 100% !important;
        max-width: 12.5ch !important;

        margin:
            0
            0
            20px !important;

        font-size:
            clamp(
                2.45rem,
                11vw,
                3.25rem
            ) !important;

        line-height: .98 !important;
        letter-spacing: -.03em !important;

        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;

        text-wrap: balance !important;
    }

    .hero-editorial-copy p {
        width: 100% !important;
        max-width: 300px !important;

        margin-top: 0 !important;

        font-size: 15px !important;
        line-height: 1.5 !important;
    }


    /* =====================================================
       SCHNELLINFORMATIONEN
    ===================================================== */

    .quick-info,
    .quick-info-grid {
        width: 100% !important;
        max-width: 100% !important;
    }

    .quick-info-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .quick-info-item {
        width: 100% !important;
        max-width: 100% !important;

        min-height: 66px !important;

        padding:
            15px
            18px !important;
    }


    /* =====================================================
       ABSCHNITTE
    ===================================================== */

    .practice-header-inner,
    .practice-hours,
    .welcome-grid,
    .doctors-section,
    .services,
    .contact-cta-inner {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 18px !important;
        padding-right: 18px !important;
    }


    /* =====================================================
       PRAXISZEITEN
    ===================================================== */

    .practice-hours-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;

        width: 100% !important;

        gap: 16px !important;
    }

    .practice-hours-card,
    .practice-hours-card-alt {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
    }


    /* =====================================================
       ÄRZTE
    ===================================================== */

    .doctor-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;

        width: 100% !important;

        gap: 18px !important;
    }

    .doctor-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .doctor-card img,
    .doctor-image {
        display: block !important;

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

        height: auto !important;
    }


    /* =====================================================
       LEISTUNGEN
    ===================================================== */

    .service-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;

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

        gap: 0 !important;
    }

    .service-card {
        width: 100% !important;
        max-width: 100% !important;

        padding:
            24px
            20px !important;
    }


    /* =====================================================
       TERMINBEREICH
    ===================================================== */

    .contact-cta-inner {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 18px !important;
    }

    .contact-cta-actions {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        gap: 9px !important;
    }

    .contact-cta-actions a,
    .contact-cta-actions button {
        width: 100% !important;
        max-width: none !important;

        text-align: center !important;
    }
}


@media (max-width: 390px) {

    .hero-editorial,
    .hero-editorial-inner {
        min-height: 410px !important;
    }

    .hero-editorial-inner {
        padding:
            36px
            16px
            30px !important;
    }

    .hero-editorial-copy h1,
    .hero-editorial h1 {
        max-width: 12ch !important;

        font-size:
            clamp(
                2.25rem,
                10.8vw,
                2.75rem
            ) !important;
    }

    .practice-header-inner,
    .practice-hours,
    .welcome-grid,
    .doctors-section,
    .services,
    .contact-cta-inner {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* UROANDRO-MOBILE-V2-END */


/* UROANDRO-MOBILE-READABILITY-FINAL-START */

@media (max-width: 700px) {

    /* =====================================================
       GRUNDLESEBARKEIT
    ===================================================== */

    body {
        font-size: 17px !important;
        line-height: 1.58 !important;
    }

    p,
    li {
        line-height: 1.58 !important;
    }

    .practice-hours-card p,
    .practice-hours-card-alt p,
    .doctor-card p,
    .doctor-card-content p,
    .service-card p,
    .welcome-grid p,
    .quick-info-item,
    .contact-cta-inner p {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }


    /* =====================================================
       ÜBERSCHRIFTEN
    ===================================================== */

    .section-title,
    .practice-hours-heading,
    .doctors-section h2,
    .services h2 {
        font-size: clamp(2rem, 8vw, 2.7rem) !important;
        line-height: 1.05 !important;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero-editorial-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .hero-editorial-copy {
        max-width: 350px !important;
    }

    .hero-editorial-copy h1,
    .hero-editorial h1 {
        font-size: clamp(2.35rem, 10vw, 3.15rem) !important;
        line-height: 1 !important;
        max-width: 12.5ch !important;
    }

    .hero-editorial-copy p {
        font-size: 16px !important;
        line-height: 1.5 !important;
        max-width: 300px !important;
    }


    /* =====================================================
       PRAXISZEITEN
    ===================================================== */

    .practice-hours-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .practice-hours-card,
    .practice-hours-card-alt {
        padding: 24px 20px !important;
    }


    /* =====================================================
       ÄRZTE
    ===================================================== */

    .doctor-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .doctor-card-content {
        padding: 22px 20px !important;
    }


    /* =====================================================
       LEISTUNGEN
    ===================================================== */

    .service-grid {
        grid-template-columns: 1fr !important;
    }

    .service-card {
        width: 100% !important;
        padding: 25px 20px !important;
    }


    /* =====================================================
       TERMIN
    ===================================================== */

    .contact-cta-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .contact-cta-actions a,
    .contact-cta-actions button {
        width: 100% !important;
        min-height: 48px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 16px !important;
    }


    /* =====================================================
       FOOTER – AUF HANDY DEFINITIV EINE SPALTE
    ===================================================== */

    footer.site-footer .footer-grid,
    .site-footer .footer-grid,
    footer .footer-grid,
    .uim-v3-exact-footer .uim-v3-footer-grid,
    .uim-v3-footer-grid {
        display: grid !important;

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

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

        gap: 26px !important;
    }

    footer.site-footer .footer-grid > *,
    .site-footer .footer-grid > *,
    footer .footer-grid > *,
    .uim-v3-exact-footer .uim-v3-footer-grid > *,
    .uim-v3-footer-grid > * {
        grid-column: 1 !important;

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

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .footer-practice-name,
    .uim-v3-footer-wordmark {
        font-size: 27px !important;
        line-height: 1.1 !important;
    }

    .site-footer p,
    .site-footer a,
    .site-footer li,
    .uim-v3-exact-footer p,
    .uim-v3-exact-footer a,
    .uim-v3-exact-footer li {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .footer-bottom,
    .uim-v3-footer-bottom {
        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

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

        gap: 12px !important;
    }

    .footer-contact-links,
    .footer-accessibility-tools,
    .uim-v3-footer-bottom-left,
    .uim-v3-footer-bottom-right {
        width: 100% !important;

        display: flex !important;
        flex-wrap: wrap !important;

        gap: 9px 14px !important;
    }
}


@media (max-width: 420px) {

    body {
        font-size: 16px !important;
    }

    .practice-hours-card p,
    .practice-hours-card-alt p,
    .doctor-card p,
    .doctor-card-content p,
    .service-card p,
    .welcome-grid p {
        font-size: 15.5px !important;
    }

    .hero-editorial-copy h1,
    .hero-editorial h1 {
        font-size: 2.35rem !important;
    }
}

/* UROANDRO-MOBILE-READABILITY-FINAL-END */



/* UROANDRO-HEADER-EMBLEM-FIX-START */

/* Nur das linke obere Emblem, sonst nichts */

.emblem-zone {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 2 !important;
}

.emblem,
.emblem-zone img {
    display: block !important;
    object-fit: contain !important;
    object-position: center center !important;
    clip-path: none !important;
    overflow: visible !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
}

/* Desktop */
@media (min-width: 821px) {
    .emblem-zone {
        width: 82px !important;
        min-width: 82px !important;
        height: 98px !important;
    }

    .emblem,
    .emblem-zone img {
        width: 82px !important;
        height: 98px !important;
    }
}

/* Handy / Tablet */
@media (max-width: 820px) {
    .emblem-zone {
        width: 60px !important;
        min-width: 60px !important;
        height: 76px !important;
    }

    .emblem,
    .emblem-zone img {
        width: 60px !important;
        height: 76px !important;
    }
}

/* UROANDRO-HEADER-EMBLEM-FIX-END */