/* =========================================================
   UROANDRODOC – GLOBALE BARRIEREFREIHEIT
   Zielniveau: WCAG 2.2 AA
========================================================= */

:root {
    --a11y-text: #433930;
    --a11y-text-soft: #594c42;
    --a11y-link: #713f30;
    --a11y-focus: #174f78;
    --a11y-focus-light: #ffffff;
    --a11y-paper: #fffdf4;
    --a11y-yellow: #f1dc73;
}


/* =========================================================
   LESBARKEIT
========================================================= */

html {
    font-size: 18px !important;

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

    scroll-behavior: smooth;
}


body {
    color: var(--a11y-text) !important;

    font-size: 18px !important;
    line-height: 1.65 !important;
}


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


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


.eyebrow,
.practice-kicker,
.practice-specialties,
.practice-address,
.practice-contact,
.team-doctor-specialty,
.doctor-specialty,
.leistung-label {
    font-size: 18px !important;
}


/* =========================================================
   SCREENREADER ONLY
========================================================= */

.sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* =========================================================
   SKIP LINK
========================================================= */

.skip-link {
    position: fixed;

    z-index: 1000000;

    top: 12px;
    left: 12px;

    padding: 14px 22px;

    color: #ffffff !important;
    background: #173d59 !important;

    border:
        3px solid #ffffff;

    border-radius: 10px;

    font-size: 18px !important;
    font-weight: 700;

    text-decoration: none !important;

    transform:
        translateY(-180%);
}


.skip-link:focus {
    transform:
        translateY(0);
}


/* =========================================================
   TASTATURFOKUS
========================================================= */

:focus-visible {
    outline:
        4px solid var(--a11y-focus) !important;

    outline-offset:
        4px !important;
}


a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-radius:
        7px;
}


/* =========================================================
   LINKS
========================================================= */

main p a,
main li a,
.legal-document a,
.accessibility-card a {
    color:
        var(--a11y-link) !important;

    font-weight:
        650 !important;

    text-decoration:
        underline !important;

    text-decoration-thickness:
        .1em !important;

    text-underline-offset:
        .18em !important;
}


/* =========================================================
   BEDIENFLÄCHEN
========================================================= */

button,
.button,
.header-appointment,
.main-navigation > a,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    min-width:
        44px !important;

    min-height:
        44px !important;
}


/* =========================================================
   FORMULARE
========================================================= */

label {
    color:
        #443930 !important;

    font-weight:
        650 !important;
}


input,
select,
textarea {
    color:
        #302923 !important;

    background:
        #fffef8 !important;

    border:
        2px solid #74695f !important;
}


::placeholder {
    color:
        #665e56 !important;

    opacity:
        1 !important;
}


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

.practice-identity strong,
.practice-address strong,
.practice-contact,
.practice-contact a,
.main-navigation > a {
    color:
        #40362e !important;
}


.main-navigation > a[aria-current="page"] {
    font-weight:
        700 !important;
}


/* =========================================================
   EXTERNE LINKS
========================================================= */

a[target="_blank"] .external-link-indicator {
    margin-left:
        .25em;
}


/* =========================================================
   FOOTER ACCESSIBILITY TOOLS
========================================================= */

.footer-accessibility-tools {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 18px;

    padding-top:
        25px;

    padding-bottom:
        25px;

    border-top:
        1px solid rgba(68, 57, 48, .18);
}


.footer-accessibility-tools a,
.footer-cookie-settings {
    display: inline-flex;

    align-items: center;

    min-height: 44px;

    padding:
        7px 0;

    color:
        #433930 !important;

    background:
        transparent !important;

    border:
        0 !important;

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

    font-size:
        18px !important;

    font-weight:
        600 !important;

    text-decoration:
        underline;

    text-underline-offset:
        .2em;

    cursor:
        pointer;
}


/* =========================================================
   BARRIEREFREIHEITSSEITE
========================================================= */

.accessibility-hero {
    padding:
        90px 0;

    background:
        linear-gradient(
            100deg,
            rgba(247,225,119,.40),
            rgba(220,240,169,.26),
            rgba(184,238,209,.29)
        ),
        url("../images/Drkellenbachhintergrund.jpg");

    background-size:
        cover;

    background-position:
        center;
}


.accessibility-hero h1 {
    margin:
        10px 0 22px;

    color:
        #574a3f !important;

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

    font-size:
        clamp(3.4rem, 5vw, 5.5rem) !important;

    font-weight:
        400 !important;

    line-height:
        1 !important;
}


.accessibility-hero > .container > p:last-child {
    max-width:
        800px;

    font-size:
        20px !important;
}


.accessibility-content {
    padding:
        95px 0 115px;

    background:
        linear-gradient(
            rgba(255,252,239,.72),
            rgba(255,250,235,.70)
        ),
        url("../images/Drkellenbachhintergrund.jpg");

    background-size:
        cover;
}


.accessibility-card {
    max-width:
        1050px;

    margin:
        0 auto;

    padding:
        55px 60px;

    background:
        rgba(255,253,239,.95);

    border:
        1px solid rgba(89,68,45,.12);

    border-radius:
        28px;

    box-shadow:
        0 18px 45px rgba(75,55,34,.09);
}


.accessibility-card h2 {
    margin:
        48px 0 18px;

    color:
        #574a3f !important;

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

    font-size:
        2.25rem !important;

    font-weight:
        400 !important;
}


.accessibility-card h2:first-child {
    margin-top:
        0;
}


.accessibility-cookie-button {
    min-height:
        52px !important;

    padding:
        0 22px;

    color:
        #ffffff;

    background:
        #a85f45;

    border:
        0;

    border-radius:
        999px;

    font-weight:
        700;

    cursor:
        pointer;
}


/* =========================================================
   VERGRÖSSERUNG / REFLOW
========================================================= */

@media (max-width: 760px) {

    .accessibility-card {
        padding:
            34px 24px;

        border-radius:
            21px;
    }

}


/* =========================================================
   BEWEGUNG REDUZIEREN
========================================================= */

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

    html {
        scroll-behavior:
            auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            .001ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .001ms !important;
    }

}


/* =========================================================
   ERHÖHTER KONTRAST
========================================================= */

@media (prefers-contrast: more) {

    body,
    p,
    li,
    address {
        color:
            #211b17 !important;
    }

    input,
    select,
    textarea {
        border:
            3px solid #211b17 !important;
    }

}


/* =========================================================
   FORCED COLORS / WINDOWS HIGH CONTRAST
========================================================= */

@media (forced-colors: active) {

    a,
    button,
    input,
    select,
    textarea {
        border:
            1px solid ButtonText;
    }

    :focus-visible {
        outline:
            3px solid Highlight !important;
    }

}