@charset "UTF-8";

/* Design aus dem Dickicht · blackape.de */


/* ROOT 
-------------------------------------------------- */

:root {
    --c_oceanblau: #425570;
    --c_oceanblau_dark: #253143;
    --c_oceanblau_light: #5b7089ff;
    --c_lavendelgrau: #CED1DE;
    --c_nebelschimmer: #EDEEF3;
    --c_weiss: #FFFFFF;

    --c_focus: #D95F5F;
    --c_focus_bg: #D95F5F;
    --c_focus_text: #fff;
}

/* BASICS 
-------------------------------------------------- */

body {
    font-family: var(--ff_1);
    font-weight: var(--fw_1);
    font-size: 1rem;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    overflow-x: hidden;
    overflow-wrap: break-word;
    -webkit-tap-highlight-color: transparent;
    background: var(--c_oceanblau);
    color: var(--c_weiss);
}

a {
    color: var(--c_weiss);
    text-decoration: none;
    transition: color 250ms ease, background-color 250ms ease;
    cursor: pointer;
}

a:hover,
a:active {
    color: var(--c_weiss);
}

a:focus,
a:focus-visible {
    color: var(--c_focus_text);
    outline: 2px solid var(--c_focus);
    outline-offset: 3px;
}

a:focus:not(:focus-visible) {
    outline: none;
}

p {
    margin-block-start: 0;
    margin-block-end: 1em;
}

button,
.btn {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--ff_1);
    font-weight: var(--fw_1);
    font-size: 1rem;
    line-height: 1;
    color: var(--c_oceanblau);
    background: var(--c_weiss);
    border: none;
    padding: 12px 25px;
    margin: 0;
    transition: background-color 550ms ease, color 550ms ease;
    cursor: pointer;
    border-radius: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

button:hover,
.btn:hover,
button:focus,
.btn:focus {
    color: var(--c_weiss);
    background: var(--c_oceanblau_dark);
    transition-duration: 750ms;
}

button:active,
.btn:active {
    color: var(--c_oceanblau);
    background: var(--c_lavendelgrau);
    outline: none;
}

.btn_oceanlight {
    background: var(--c_oceanblau_light);
    color: var(--c_weiss);
}

.btn_oceanlight:hover, 
.btn_oceanlight:focus {
    color: var(--c_weiss);
    background: var(--c_oceanblau_dark);
}

.btn_oceanlight:active {
    color: var(--c_oceanblau);
    background: var(--c_lavendelgrau);
}

.bg_lavendelgrau {
    background: var(--c_lavendelgrau);
    color: var(--c_oceanblau);
}

.bg_weiss {
    background: var(--c_weiss);
    color: var(--c_oceanblau);
}

.bg_weiss a {
    color: var(--c_oceanblau);
}

.bg_weiss a:hover, .bg_weiss a:active {
    color: var(--c_oceanblau_dark);
}

button:focus-visible,
.btn:focus-visible {
    color: var(--c_focus_text);
    background: var(--c_focus_bg);
    outline: 2px solid var(--c_focus);
    outline-offset: 2px;
    transition-duration: 0ms;
    z-index: 500;
}

button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
    outline: none;
}

.eyebrown {
    font-size: .8em;
}

.br_1 {
    border-radius: 30px 30px 30px 0;
    overflow: hidden;
}

.br_2 {
    border-radius: 0 0 30px 0;
    overflow: hidden;
}

.br_3 {
    border-radius: 20px 20px 20px 0;
    overflow: hidden;
}


/* ACCESSIBILITY 
-------------------------------------------------- */

.visually_hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skiplink {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background: var(--c_focus_bg);
    color: var(--c_focus_text);
    outline: 2px solid var(--c_focus) !important;
    border-radius: 12px;
}

.skiplink:focus,
.skiplink:focus-visible {
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    z-index: 25000;
    font-weight: bold;
    text-decoration: none;
}

.skiplink:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--c_focus);
    outline-offset: 3px;
    border-radius: 12px;
}

:focus:not(:focus-visible) {
    outline: none;
}


/* SPECIALS 
-------------------------------------------------- */

.pos_rel {
    position: relative;
}

.clearer {
    clear: both;
}

.show_mobile {
    display: block;
}

.show_tablet {
    display: none;
}

.show_desk {
    display: none;
}

.show_mobile_2 {
    display: block;
}

.show_desk_2 {
    display: none;
}


/* CONTENT 
-------------------------------------------------- */

.logo {
    width: 140px;
    height: auto;
    margin-inline: auto;
    margin-block: 40px 35px;
}

.overlay_text {
    padding: 30px 40px 30px 30px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: saturate(180%) blur(50px);
    backdrop-filter: saturate(180%) blur(50px);
    max-width: 600px;
    width: 100%;
    margin: -80px auto 0;
}

.overlay_text h1 {
    font-size: 1.6rem;
}

.overlay_text p {
    margin-bottom: 0;
}

.dis_non_810 {
    display: none;
}


/* QUICKCONTACT TOP 
-------------------------------------------------- */

.quickcontact_top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
}

.quickcontact_top_item,
.quickcontact_top_action {
    flex: 0 0 auto;
}

.quickcontact_top .like_h4 {
    margin-bottom: 0.6rem;
}

.quickcontact_top p {
    margin-bottom: 0;
}


/* QUICKCONTACT ADDRESS 
-------------------------------------------------- */

.padding_quickcontact {
    padding-block: 20px 60px;
}

.padding_adress {
    padding-block: 60px 0px;
}

.quickcontact_flex {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.quickcontact_col,
.quickcontact_actions {
    display: contents;
}

.quickcontact_block .like_h4 {
    margin-bottom: 0.6rem;
}

.quickcontact_block p {
    margin-bottom: 0;
}

.quickcontact_address h2 {
    margin-bottom: 35px;
}

.quickcontact_address_data {
    order: 1;
    margin-bottom: 15px;
}

.quickcontact_route_wrap {
    order: 2;
    align-self: flex-start;
    margin-bottom: 50px;
}

.quickcontact_hours {
    order: 3;
    margin-bottom: 25px;
}

.quickcontact_phone {
    order: 4;
    margin-bottom: 25px;
}

.quickcontact_mail {
    order: 5;
    margin-bottom: 25px;
}

.quickcontact_booking_wrap {
    order: 6;
    align-self: flex-start;
}

.spacer_1 {
    display: inline-block;
    width: 75px;
}


/* BENEFITS 
-------------------------------------------------- */

.benefits {
    align-items: stretch;
    margin: 0;
    padding: 0;
}

.benefit_item {
    background: var(--c_weiss);
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 40px 15px 20px;
}

.benefit_item p {
    margin: 0;
}

.benefit_icon {
    flex: 0 0 70px;
    width: 70px;
}

.benefit_icon img {
    display: block;
    width: 100%;
    height: auto;
}

.benefit_text {
    flex: 1;
    min-width: 0;
}

.flex_wrap_center {
    gap: 15px;
}
.footer_quote p {
    margin-bottom: 0;
}

.footer_quote img {
    width: 70px;
}

.legal_credit {
    text-align: left;
}

.legal_credit p {
    margin-bottom: 0;
}

.legal h1, .legal h2, .legal h3, .legal h4, .legal h5 .legal h6 {
    margin-top: 40px;
}

@media (min-width: 520px) {
    
    .legal_credit {
        text-align: center;
    }

}


/* TABLET 
-------------------------------------------------- */

@media (min-width: 640px) {

    .quickcontact_address h2 {
        margin-bottom: 50px;
    }

    .br_2 {
        border-radius: 30px 30px 30px 0;
        overflow: hidden;
    }

    .quickcontact_flex {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        column-gap: 25px;
        row-gap: 0;
    }

    .quickcontact_address_data,
    .quickcontact_route_wrap,
    .quickcontact_hours,
    .quickcontact_phone,
    .quickcontact_mail,
    .quickcontact_booking_wrap {
        flex: 0 1 calc(50% - 12.5px);
    }

    .quickcontact_address_data {
        order: 1;
    }

    .quickcontact_phone {
        order: 2;
    }

    .quickcontact_route_wrap {
        order: 3;
    }

    .quickcontact_mail {
        order: 4;
    }

    .quickcontact_hours {
        order: 5;
    }

    .quickcontact_booking_wrap {
        order: 6;
    }

}

@media (min-width: 768px) {

    .show_mobile {
        display: none;
    }

    .show_tablet {
        display: block;
    }

    .show_desk {
        display: none;
    }

    .flex_wrap_center {
        gap: 25px;
    }

}

@media (min-width: 810px) {

    .dis_non_810 {
        display: block;
    }

    .padding_quickcontact {
        padding-block: 40px;
    }

    .padding_adress {
        padding-block: 60px 0;
    }

    .quickcontact_top {
        gap: 30px;
    }

    .quickcontact_top_booking {
        margin-left: auto;
    }

    .quickcontact_flex {
        flex-direction: row;
        align-items: flex-start;
        gap: 30px;
    }

    .quickcontact_col {
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    .quickcontact_col_address {
        flex: 0 1 260px;
    }

    .quickcontact_col_times {
        flex: 0 1 180px;
    }

    .quickcontact_actions {
        display: flex;
        flex: 0 0 auto;
        flex-wrap: wrap;
        gap: 15px;
        margin-left: auto;
        align-items: flex-start;
    }

    .quickcontact_mail,
    .quickcontact_address_data,
    .quickcontact_phone,
    .quickcontact_hours,
    .quickcontact_booking_wrap,
    .quickcontact_route_wrap {
        order: initial;
        flex: initial;
        margin-bottom: 0;
    }

}

@media (min-width: 870px) {

    .quickcontact_col_address {
        flex: 0 1 300px;
    }

    .quickcontact_col_times {
        flex: 0 1 210px;
    }

    .quickcontact_actions {
        gap: 30px;
    }

}


/* DESKTOP 
-------------------------------------------------- */

@media (min-width: 1024px) {

    .br_1 {
        border-radius: 30px 30px 30px 0;
    }

    .br_2 {
        border-radius: 30px 30px 30px 0;
    }

    .show_mobile {
        display: none;
    }

    .show_tablet {
        display: none;
    }

    .show_desk {
        display: block;
    }

    .show_mobile_2 {
        display: none;
    }

    .show_desk_2 {
        display: block;
    }

    .overlay_text {
        position: absolute;
        z-index: 10;
        left: 60px;
        top: revert;
        bottom: 40px;
        transform: translate(0);
        padding: 50px;
        max-width: 535px;
    }

    .overlay_text h1 {
        font-size: 2rem;
    }

    .overlay_text p {
        margin-bottom: 0;
    }

}

/* REDUCED MOTION 
-------------------------------------------------- */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

}