/* =========================================================
   UROANDRODOC – GLOBAL RESPONSIVE SYSTEM
   Desktop · Laptop · Tablet · Smartphone

   Breakpoints:
   Desktop:       ab 1201px
   Tablet quer:   901–1200px
   Tablet hoch:   701–900px
   Smartphone:    bis 700px
   Klein:         bis 420px
========================================================= */


/* =========================================================
   1. GLOBALE BASIS
========================================================= */

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


html {
    width: 100%;
    max-width: 100%;

    overflow-x: hidden;

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


body {
    width: 100%;
    max-width: 100%;

    margin: 0;

    overflow-x: hidden;
}


main,
header,
footer,
section,
article,
nav {
    max-width: 100%;
}


.container {
    width: min(
        calc(100% - 48px),
        1240px
    ) !important;

    margin-inline: auto !important;
}


/* =========================================================
   2. BILDER / MEDIEN
========================================================= */

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


img {
    height: auto;
}


iframe {
    display: block;

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


/* =========================================================
   3. LANGE TEXTE / LINKS
========================================================= */

p,
li,
a,
span,
strong,
address {
    overflow-wrap: anywhere;
}


h1,
h2,
h3,
h4 {
    overflow-wrap: normal;

    hyphens: auto;
}


/* =========================================================
   4. HEADER DESKTOP
========================================================= */

.practice-header-inner,
.navigation-inner {
    width: min(
        calc(100% - 48px),
        1240px
    ) !important;

    margin-inline: auto !important;
}


.practice-header-inner {
    display: grid !important;

    grid-template-columns:
        auto
        minmax(260px, 1.2fr)
        minmax(175px, .55fr)
        minmax(230px, .75fr)
        auto !important;

    align-items: center !important;

    gap: 24px !important;
}


.practice-logo {
    flex-shrink: 0;
}


.practice-logo img {
    width: clamp(62px, 5vw, 86px) !important;
    height: auto !important;
}


.practice-identity,
.practice-address,
.practice-contact {
    min-width: 0;
}


.practice-contact a,
.practice-contact div {
    max-width: 100%;
}


.navigation-inner {
    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 20px !important;
}


.main-navigation {
    display: flex !important;

    flex-wrap: wrap;

    align-items: center;

    gap: 2px 18px !important;
}


.main-navigation > a {
    white-space: nowrap;
}


.menu-toggle {
    display: none;
}


/* =========================================================
   5. ALLGEMEINE GRIDS
========================================================= */

.home-doctors-grid,
.doctors-grid,
.team-doctors-grid,
.kontakt-info-grid,
.aktuelles-highlight-grid,
.route-planner-layout,
.kontakt-message-grid,
.kontakt-hero-grid,
.aktuelles-hero-grid,
.leistungen-hero-grid,
.bastisch-hero-grid,
.doctor-profile-grid {
    min-width: 0;
}


.home-doctors-grid > *,
.doctors-grid > *,
.team-doctors-grid > *,
.kontakt-info-grid > *,
.aktuelles-highlight-grid > *,
.route-planner-layout > *,
.kontakt-message-grid > *,
.kontakt-hero-grid > *,
.aktuelles-hero-grid > *,
.leistungen-hero-grid > *,
.bastisch-hero-grid > *,
.doctor-profile-grid > * {
    min-width: 0;
}


/* =========================================================
   6. FORMULARE
========================================================= */

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


textarea {
    resize: vertical;
}


.kontakt-form,
.route-planner-card {
    width: 100%;
}


/* =========================================================
   7. MAP
========================================================= */

.kontakt-map-frame {
    width: 100%;

    overflow: hidden;
}


.kontakt-map-frame iframe {
    width: 100% !important;

    min-height: 520px;
}


/* =========================================================
   8. ZERTIFIKATS-SLIDER
========================================================= */

.certificate-slider,
.certificate-viewport,
.certificate-track,
.certificate-slide {
    max-width: 100%;
}


.certificate-slide {
    min-width: 100%;
}


/* =========================================================
   9. FOOTER
========================================================= */

.footer-grid {
    width: 100%;
}


.footer-bottom {
    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    gap: 20px;
}


/* =========================================================
   10. DESKTOP / GROSSE BILDSCHIRME
   ab 1201 px
========================================================= */

@media (min-width: 1201px) {

    .container,
    .practice-header-inner,
    .navigation-inner {
        width: min(
            calc(100% - 64px),
            1320px
        ) !important;
    }


    .kontakt-map-frame iframe {
        min-height: 620px;
    }


    .certificate-document {
        height: 560px;
    }

}


/* =========================================================
   11. TABLET QUER / KLEINE LAPTOPS
   901–1200 px
========================================================= */

@media (max-width: 1200px) {

    .container,
    .practice-header-inner,
    .navigation-inner {
        width: min(
            calc(100% - 40px),
            1120px
        ) !important;
    }


    /* HEADER */

    .practice-header-inner {
        grid-template-columns:
            auto
            minmax(250px, 1fr)
            minmax(180px, .7fr)
            auto !important;

        gap: 18px !important;
    }


    .practice-contact {
        display: none !important;
    }


    .navigation-inner {
        align-items: flex-start !important;
    }


    .main-navigation {
        gap: 0 12px !important;
    }


    .main-navigation > a {
        font-size: 17px !important;
    }


    .header-appointment {
        flex-shrink: 0;
    }


    /* HERO */

    .kontakt-hero-grid,
    .aktuelles-hero-grid,
    .leistungen-hero-grid,
    .bastisch-hero-grid,
    .doctor-profile-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, .82fr) !important;

        gap: 45px !important;
    }


    /* CONTENT GRIDS */

    .kontakt-message-grid,
    .route-planner-layout {
        grid-template-columns:
            minmax(0, .9fr)
            minmax(400px, 1.1fr) !important;

        gap: 40px !important;
    }


    /* CARDS */

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


    /* TEAM */

    .team-staff-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 24px 18px !important;
    }


    .team-staff-card {
        width: 100% !important;
        max-width: none !important;
    }


    .team-staff-card img {
        width: 100% !important;

        aspect-ratio: 1 / 1;

        object-fit: cover;
    }


    /* MAP */

    .kontakt-map-frame iframe {
        min-height: 540px;
    }

}


/* =========================================================
   12. TABLET HOCH
   701–900 px
========================================================= */

@media (max-width: 900px) {

    .container,
    .practice-header-inner,
    .navigation-inner {
        width: min(
            calc(100% - 32px),
            860px
        ) !important;
    }


    /* =====================================================
       HEADER
    ===================================================== */

    .practice-header-inner {
        display: grid !important;

        grid-template-columns:
            auto
            1fr
            auto !important;

        gap: 15px !important;

        min-height: 105px !important;
    }


    .practice-logo img {
        width: 68px !important;
    }


    .practice-address,
    .practice-contact {
        display: none !important;
    }


    .practice-identity strong {
        display: block;

        line-height: 1.25;
    }


    .practice-specialties {
        display: block;

        margin-top: 4px;

        line-height: 1.35;
    }


    .menu-toggle {
        display: flex !important;

        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 6px;

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

        padding: 0 !important;

        background: transparent;

        border: 0;

        cursor: pointer;
    }


    .menu-toggle span {
        display: block;

        width: 28px;
        height: 3px;

        background: #433930;

        border-radius: 999px;
    }


    /* NAVIGATION MOBILISIEREN */

    .navigation-bar {
        position: relative;
    }


    .navigation-inner {
        display: block !important;
    }


    .main-navigation {
        display: none !important;

        width: 100%;

        padding: 12px 0 20px;
    }


    .main-navigation.is-open {
        display: flex !important;

        flex-direction: column;

        align-items: stretch;

        gap: 0 !important;
    }


    .main-navigation > a {
        display: flex !important;

        align-items: center;

        width: 100%;

        min-height: 56px !important;

        padding: 10px 8px !important;

        border-bottom:
            1px solid rgba(70, 57, 46, .12);

        white-space: normal !important;

        font-size: 18px !important;
    }


    .header-appointment {
        display: none !important;
    }


    /* =====================================================
       HERO-BEREICHE EINSPALTIG
    ===================================================== */

    .kontakt-hero-grid,
    .aktuelles-hero-grid,
    .leistungen-hero-grid,
    .bastisch-hero-grid,
    .doctor-profile-grid,
    .kontakt-message-grid,
    .route-planner-layout,
    .aktuelles-highlight-grid,
    .kontakt-section-heading,
    .route-planner-heading,
    .certificates-heading {
        grid-template-columns:
            1fr !important;

        gap: 35px !important;
    }


    /* Hero Bilder */

    .aktuelles-hero-image,
    .leistungen-hero-image,
    .bastisch-portrait,
    .doctor-profile-image,
    .kontakt-address-card {
        width: min(
            100%,
            680px
        ) !important;

        margin-inline: auto !important;
    }


    .aktuelles-hero-image img,
    .leistungen-hero-image img,
    .doctor-profile-image img,
    .bastisch-portrait img {
        width: 100% !important;

        height: auto !important;

        max-height: none !important;
    }


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

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


    /* =====================================================
       TEAM
    ===================================================== */

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

        gap: 25px !important;
    }


    .team-staff-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 24px 18px !important;
    }


    /* =====================================================
       KONTAKT
    ===================================================== */

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


    .kontakt-form-row {
        grid-template-columns:
            1fr !important;
    }


    .kontakt-message-intro {
        position: static !important;
    }


    .kontakt-map-frame iframe {
        min-height: 500px;
    }


    /* =====================================================
       ZERTIFIKATE
    ===================================================== */

    .certificate-slider {
        grid-template-columns:
            52px
            minmax(0, 1fr)
            52px !important;

        gap: 10px !important;
    }


    .certificate-document {
        height: 500px !important;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

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

        gap: 40px !important;
    }

}


/* =========================================================
   13. SMARTPHONE
   bis 700 px
========================================================= */

@media (max-width: 700px) {

    .container,
    .practice-header-inner,
    .navigation-inner {
        width:
            calc(100% - 28px) !important;
    }


    /* =====================================================
       ABSTÄNDE
    ===================================================== */

    section {
        scroll-margin-top: 120px;
    }


    .kontakt-hero,
    .aktuelles-hero,
    .leistungen-hero,
    .bastisch-hero,
    .doctor-profile-hero,
    .accessibility-hero {
        padding-top:
            55px !important;

        padding-bottom:
            60px !important;
    }


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

    h1,
    .kontakt-hero-copy h1,
    .aktuelles-hero-copy h1,
    .leistungen-hero h1,
    .bastisch-hero h1,
    .doctor-profile-hero h1,
    .accessibility-hero h1 {
        font-size:
            clamp(2.7rem, 12vw, 4rem) !important;

        line-height:
            1.02 !important;
    }


    h2,
    .kontakt-section-heading h2,
    .route-planner-heading h2,
    .certificates-heading h2 {
        font-size:
            clamp(2rem, 8.5vw, 3rem) !important;
    }


    p,
    li,
    a,
    label,
    input,
    select,
    textarea,
    button {
        font-size:
            18px !important;
    }


    /* =====================================================
       HEADER
    ===================================================== */

    .practice-header-inner {
        min-height:
            92px !important;

        padding-block:
            10px !important;
    }


    .practice-logo img {
        width:
            58px !important;
    }


    .practice-kicker {
        display:
            none !important;
    }


    .practice-identity strong {
        font-size:
            17px !important;

        line-height:
            1.2 !important;
    }


    .practice-specialties {
        font-size:
            14px !important;

        line-height:
            1.3 !important;
    }


    .menu-toggle {
        width:
            48px !important;

        height:
            48px !important;
    }


    /* =====================================================
       ALLE ZWEI-/DREISPALTIGEN BEREICHE EINSPALTIG
    ===================================================== */

    .services-grid,
    .leistungen-grid,
    .team-doctors-grid,
    .kontakt-info-grid,
    .kontakt-form-row,
    .footer-grid {
        grid-template-columns:
            1fr !important;
    }


    /* =====================================================
       TEAM – 2 MITARBEITER PRO REIHE
    ===================================================== */

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

        gap:
            24px 14px !important;
    }


    .team-staff-card {
        width:
            100% !important;

        max-width:
            none !important;
    }


    .team-staff-card img {
        width:
            100% !important;

        height:
            auto !important;

        aspect-ratio:
            1 / 1;

        object-fit:
            cover;
    }


    /* =====================================================
       CARDS
    ===================================================== */

    .news-card,
    .kontakt-info-card,
    .kontakt-address-card,
    .kontakt-form,
    .route-planner-card,
    .route-preview-card,
    .accessibility-card {
        padding:
            28px 22px !important;

        border-radius:
            21px !important;
    }


    /* =====================================================
       BUTTONS
    ===================================================== */

    .kontakt-hero-actions,
    .route-buttons,
    .contact-cta-actions {
        flex-direction:
            column !important;

        align-items:
            stretch !important;
    }


    .kontakt-hero-actions .button,
    .route-buttons button,
    .contact-cta-actions .button,
    .kontakt-submit {
        width:
            100% !important;

        justify-content:
            center !important;

        text-align:
            center !important;
    }


    /* =====================================================
       KONTAKTFORMULAR
    ===================================================== */

    .kontakt-form-row {
        display:
            block !important;
    }


    .kontakt-field {
        width:
            100% !important;
    }


    .kontakt-field input,
    .kontakt-field select,
    .kontakt-field textarea {
        width:
            100% !important;
    }


    /* =====================================================
       MAP
    ===================================================== */

    .kontakt-map-frame {
        padding:
            8px !important;

        border-radius:
            22px !important;
    }


    .kontakt-map-frame iframe {
        min-height:
            420px !important;

        height:
            420px !important;

        border-radius:
            16px !important;
    }


    .consent-media-placeholder {
        min-height:
            420px !important;
    }


    /* =====================================================
       ZERTIFIKATS-SLIDER
    ===================================================== */

    .certificate-slider {
        display:
            block !important;

        position:
            relative;
    }


    .certificate-viewport {
        width:
            100% !important;

        min-height:
            0 !important;
    }


    .certificate-slide {
        padding:
            14px 14px 24px !important;
    }


    .certificate-document {
        width:
            100% !important;

        height:
            440px !important;
    }


    .certificate-arrow {
        position:
            absolute !important;

        z-index:
            10;

        top:
            205px !important;
    }


    .certificate-arrow-prev {
        left:
            6px !important;
    }


    .certificate-arrow-next {
        right:
            6px !important;
    }


    .certificate-dots {
        margin-top:
            18px !important;
    }


    /* =====================================================
       ANFAHRT
    ===================================================== */

    .route-preview-row {
        display:
            block;
    }


    /* =====================================================
       CTA
    ===================================================== */

    .contact-cta-inner {
        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            28px !important;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .footer-grid {
        gap:
            34px !important;
    }


    .footer-bottom {
        flex-direction:
            column !important;

        align-items:
            flex-start !important;

        gap:
            8px !important;
    }


    .footer-accessibility-tools {
        flex-direction:
            column !important;

        align-items:
            flex-start !important;
    }


    /* =====================================================
       COOKIE BANNER
    ===================================================== */

    .consent-banner {
        right:
            8px !important;

        bottom:
            8px !important;

        left:
            8px !important;

        width:
            auto !important;

        max-height:
            calc(100dvh - 16px);

        overflow-y:
            auto;
    }


    .cookie-dialog {
        width:
            calc(100% - 20px) !important;

        max-height:
            calc(100dvh - 20px) !important;
    }

}


/* =========================================================
   14. KLEINE SMARTPHONES
   bis 420px
========================================================= */

@media (max-width: 420px) {

    .container,
    .practice-header-inner,
    .navigation-inner {
        width:
            calc(100% - 20px) !important;
    }


    .practice-header-inner {
        grid-template-columns:
            48px
            1fr
            44px !important;

        gap:
            9px !important;
    }


    .practice-logo img {
        width:
            48px !important;
    }


    .practice-identity strong {
        font-size:
            15px !important;
    }


    .practice-specialties {
        font-size:
            12px !important;
    }


    h1,
    .kontakt-hero-copy h1,
    .aktuelles-hero-copy h1,
    .bastisch-hero h1,
    .doctor-profile-hero h1,
    .accessibility-hero h1 {
        font-size:
            clamp(2.3rem, 12vw, 3.1rem) !important;
    }


    /* TEAM weiterhin 2 nebeneinander,
       aber kompakter */

    .team-staff-grid {
        gap:
            20px 10px !important;
    }


    .team-staff-card h3 {
        font-size:
            18px !important;
    }


    /* Zertifikate */

    .certificate-document {
        height:
            380px !important;
    }


    .certificate-arrow {
        top:
            175px !important;

        width:
            42px !important;

        height:
            42px !important;
    }


    /* MAP */

    .kontakt-map-frame iframe,
    .consent-media-placeholder {
        min-height:
            360px !important;

        height:
            360px !important;
    }

}


/* =========================================================
   15. LANDSCAPE AUF KLEINEN GERÄTEN
========================================================= */

@media (
    max-height: 520px
)
and (
    orientation: landscape
) {

    .consent-banner {
        max-height:
            calc(100dvh - 12px);

        overflow-y:
            auto;
    }


    .cookie-dialog {
        max-height:
            calc(100dvh - 12px);
    }


    .main-navigation.is-open {
        max-height:
            70vh;

        overflow-y:
            auto;
    }

}


/* =========================================================
   16. DRUCK
========================================================= */

@media print {

    .menu-toggle,
    .header-appointment,
    .certificate-dev-admin,
    .consent-banner,
    .cookie-dialog,
    .footer-cookie-settings {
        display:
            none !important;
    }


    .container {
        width:
            100% !important;

        max-width:
            none !important;
    }


    body {
        overflow:
            visible !important;
    }

}



/* =========================================================
   Jameda – sichtbar auf allen Seiten
========================================================= */

.footer-jameda-block {
    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    min-width: 0 !important;
}


.footer-jameda-block h3 {
    margin: 0 0 14px !important;

    color: #433930 !important;

    font-family:
        Baskerville,
        "Palatino Linotype",
        Palatino,
        Georgia,
        serif !important;

    font-size: 22px !important;

    font-weight: 600 !important;
}


.footer-jameda-block p {
    max-width: 270px !important;

    margin: 0 0 17px !important;

    color: #4d4239 !important;

    font-size: 18px !important;

    line-height: 1.55 !important;
}


.footer-jameda-button {
    display: inline-flex !important;

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

    gap: 9px !important;

    min-height: 50px !important;

    padding: 10px 18px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #4d7777,
            #3e656c
        ) !important;

    border:
        2px solid transparent !important;

    border-radius: 999px !important;

    box-shadow:
        0 8px 20px
        rgba(53, 74, 73, .16) !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: 18px !important;

    font-weight: 700 !important;

    line-height: 1.3 !important;

    text-decoration: none !important;
}


.footer-jameda-button:hover {
    color: #ffffff !important;

    background:
        #355d63 !important;

    transform:
        translateY(-1px);
}


.footer-jameda-button:focus-visible {
    outline:
        4px solid #174f78 !important;

    outline-offset:
        4px !important;
}


.jameda-external-icon {
    font-size: 18px !important;
}


.footer-jameda-fallback {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
}


@media (min-width: 901px) {

    .footer-grid {
        grid-template-columns:
            minmax(270px, 1.15fr)
            minmax(160px, .65fr)
            minmax(160px, .65fr)
            minmax(250px, .9fr)
            !important;
    }

}


@media (max-width: 900px) {

    .footer-jameda-block {
        width: 100% !important;
    }

}


@media (max-width: 700px) {

    .footer-jameda-button {
        width: 100% !important;

        max-width: 340px !important;
    }

}



/* =========================================================
   Direkter Jameda-Link Dr. von Kellenbach
========================================================= */

.doctor-jameda-direct-wrap {
    display: flex !important;

    justify-content: flex-start !important;

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


.doctor-jameda-direct {
    display: inline-flex !important;

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

    min-height: 52px !important;

    padding: 10px 21px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #4d7777,
            #3e656c
        ) !important;

    border-radius: 999px !important;

    font-size: 18px !important;

    font-weight: 700 !important;

    text-decoration: none !important;

    box-shadow:
        0 8px 20px rgba(53,74,73,.16) !important;
}


.doctor-jameda-direct:hover {
    background: #355d63 !important;

    color: #ffffff !important;
}


.doctor-jameda-direct:focus-visible {
    outline:
        4px solid #174f78 !important;

    outline-offset:
        4px !important;
}


@media (max-width: 700px) {

    .doctor-jameda-direct {
        width: 100% !important;
    }

}