:root {
    --kh-forest-950: #1d3214;
    --kh-forest-900: #28451c;
    --kh-forest-800: #365821;
    --kh-forest-700: #486f28;
    --kh-meadow-600: #668d31;
    --kh-meadow-500: #85aa3f;
    --kh-meadow-300: #b8cf72;
    --kh-leaf-100: #edf4df;
    --kh-nav-hover: #e1ecc9;
    --kh-cream: #fffdf4;
    --kh-paper: #fffffc;
    --kh-ink: #26351f;
    --kh-muted: #5f6d58;
    --kh-line: rgb(54 88 33 / 18%);
    --kh-shadow: 0 1.1rem 3rem rgb(25 48 15 / 22%);
}

body.cms-template-kinderherberge {
    min-height: 100vh;
    margin: 0;
    color: var(--kh-ink);
    background-color: #dcebd3;
    font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif;
}

body.cms-template-kinderherberge.cms-background-images-enabled {
    background-image: url("../images/Kinderherberge/BackgroundM.jpg") !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

.cms-template-kinderherberge .kh-site-shell {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    padding-bottom: var(--cms-footer-height, 44px);
}

.cms-template-kinderherberge .kh-site-shell::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    content: "";
    background:
        linear-gradient(180deg, rgb(240 246 225 / 24%), rgb(34 65 20 / 18%)),
        linear-gradient(90deg, rgb(255 253 244 / 22%), transparent 45%);
    pointer-events: none;
}

.cms-template-kinderherberge .kh-masthead {
    position: relative;
    overflow: hidden;
    color: #fff;
    border-bottom: 1px solid rgb(255 255 255 / 30%);
    background:
        radial-gradient(circle at 82% 20%, rgb(184 207 114 / 30%), transparent 27rem),
        linear-gradient(112deg, rgb(29 50 20 / 98%), rgb(92 126 47 / 94%));
    box-shadow: 0 .45rem 1.4rem rgb(25 48 15 / 28%);
}

.cms-template-kinderherberge .kh-masthead::after {
    position: absolute;
    inset: 0;
    content: "";
    opacity: .12;
    background-image: url("../images/Kinderherberge/BackgroundL.jpg");
    background-position: center 72%;
    background-size: cover;
    mix-blend-mode: screen;
    pointer-events: none;
}

.cms-template-kinderherberge .kh-masthead-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 11rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    gap: clamp(1.1rem, 3vw, 2.4rem);
}

.cms-template-kinderherberge .kh-logo {
    display: flex;
    flex: 0 0 10rem;
    align-items: center;
    justify-content: center;
    width: 10rem;
    height: 8rem;
    padding: .25rem;
    border: 1px solid rgb(255 255 255 / 48%);
    border-radius: 1.4rem;
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 .65rem 1.6rem rgb(21 39 13 / 30%);
    transition: transform .2s ease, box-shadow .2s ease;
}

.cms-template-kinderherberge .kh-logo:hover,
.cms-template-kinderherberge .kh-logo:focus {
    transform: translateY(-2px) rotate(-1deg);
    box-shadow: 0 .85rem 1.9rem rgb(21 39 13 / 36%);
}

.cms-template-kinderherberge .kh-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cms-template-kinderherberge .kh-masthead-copy p {
    margin: 0;
    color: inherit;
}

.cms-template-kinderherberge .kh-kicker {
    margin-bottom: .3rem !important;
    color: #c8ef8d !important;
    font-size: .78rem !important;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.cms-template-kinderherberge .kh-site-title {
    font-size: clamp(2rem, 4.8vw, 3.55rem) !important;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.02;
    text-shadow: 0 .16rem .3rem rgb(21 39 13 / 30%);
}

.cms-template-kinderherberge .kh-tagline {
    margin-top: .42rem !important;
    color: rgb(255 255 255 / 92%) !important;
    font-size: clamp(.95rem, 1.8vw, 1.2rem) !important;
}

.cms-template-kinderherberge .kh-quick-facts {
    display: flex;
    flex-wrap: wrap;
    margin: .8rem 0 0;
    gap: .45rem;
    list-style: none;
}

.cms-template-kinderherberge .kh-quick-facts li {
    margin: 0;
    padding: .32rem .68rem;
    border: 1px solid rgb(255 255 255 / 38%);
    border-radius: 999px;
    color: #fff;
    background: rgb(255 255 255 / 11%);
    font-size: .83rem;
    font-weight: 650;
    backdrop-filter: blur(7px);
}

.cms-template-kinderherberge .cms-sticky-nav-container {
    min-height: 3.8rem;
}

.cms-template-kinderherberge .cms-top-bar,
.cms-template-kinderherberge .cms-top-bar ul,
.cms-template-kinderherberge .cms-top-bar li,
.cms-template-kinderherberge #responsive-menu {
    color: #fff;
    background: rgb(29 50 20 / 97%) !important;
}

.cms-template-kinderherberge .cms-top-bar {
    min-height: 3.8rem;
    padding-right: max(1rem, calc((100vw - 75rem) / 2));
    padding-left: max(1rem, calc((100vw - 75rem) / 2));
    border-bottom: .22rem solid var(--kh-meadow-500);
    box-shadow: 0 .35rem 1rem rgb(21 39 13 / 27%);
}

.cms-template-kinderherberge .cms-top-bar-title {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

.cms-template-kinderherberge .cms-brand {
    display: none !important;
}

.cms-template-kinderherberge .cms-top-bar .menu > li > a,
.cms-template-kinderherberge .cms-top-bar .menu > li > .button.clear,
.cms-template-kinderherberge .cms-top-bar .menu > li > .cms-logout-form > .button.clear {
    position: relative;
    margin: 0;
    padding: 1.2rem .9rem 1rem;
    border: 0;
    border-radius: 0;
    color: #fff;
    background: transparent !important;
    box-shadow: none;
    font-weight: 700;
    line-height: 1;
    transform: none;
}

.cms-template-kinderherberge .cms-top-bar .menu > li > a::before,
.cms-template-kinderherberge .cms-top-bar .menu > li > .button.clear::before,
.cms-template-kinderherberge .cms-top-bar .menu > li > .cms-logout-form > .button.clear::before {
    position: absolute;
    right: .8rem;
    bottom: .06rem;
    left: .8rem;
    height: 2px;
    content: "";
    background: #c4df72;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .18s ease;
}

.cms-template-kinderherberge .cms-top-bar .menu > li > a:hover,
.cms-template-kinderherberge .cms-top-bar .menu > li > a:focus,
.cms-template-kinderherberge .cms-top-bar .menu > li > .button.clear:hover,
.cms-template-kinderherberge .cms-top-bar .menu > li > .button.clear:focus,
.cms-template-kinderherberge .cms-top-bar .menu > li > .cms-logout-form > .button.clear:hover,
.cms-template-kinderherberge .cms-top-bar .menu > li > .cms-logout-form > .button.clear:focus,
.cms-template-kinderherberge .cms-top-bar .menu > li.is-active > a {
    color: #fff !important;
    background: rgb(184 207 114 / 18%) !important;
    box-shadow: none;
    transform: none;
}

.cms-template-kinderherberge .cms-top-bar .menu > li > a:hover::before,
.cms-template-kinderherberge .cms-top-bar .menu > li > a:focus::before,
.cms-template-kinderherberge .cms-top-bar .menu > li > .button.clear:hover::before,
.cms-template-kinderherberge .cms-top-bar .menu > li > .button.clear:focus::before,
.cms-template-kinderherberge .cms-top-bar .menu > li > .cms-logout-form > .button.clear:hover::before,
.cms-template-kinderherberge .cms-top-bar .menu > li > .cms-logout-form > .button.clear:focus::before,
.cms-template-kinderherberge .cms-top-bar .menu > li.is-active > a::before {
    transform: scaleX(1);
}

.cms-template-kinderherberge .cms-top-bar .label {
    border-color: rgb(255 255 255 / 60%);
    color: #fff;
}

.cms-template-kinderherberge .cms-top-bar .menu-icon.dark::after,
.cms-template-kinderherberge .cms-top-bar .menu-icon::after {
    background: #fff;
    box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
}

.cms-template-kinderherberge .dropdown.menu > li.is-dropdown-submenu-parent > a::after {
    border-top-color: #c4df72;
}

.cms-template-kinderherberge .is-dropdown-submenu {
    border: 1px solid rgb(184 207 114 / 52%);
    background: var(--kh-forest-950) !important;
    box-shadow: 0 .8rem 1.6rem rgb(21 39 13 / 30%);
}

.cms-template-kinderherberge .cms-top-bar .is-dropdown-submenu a {
    color: #fff !important;
    background: transparent !important;
}

.cms-template-kinderherberge .cms-top-bar .is-dropdown-submenu a:hover,
.cms-template-kinderherberge .cms-top-bar .is-dropdown-submenu a:focus,
.cms-template-kinderherberge .cms-top-bar .is-dropdown-submenu li.is-active > a {
    color: var(--kh-forest-950) !important;
    background: var(--kh-nav-hover) !important;
}

.cms-template-kinderherberge .kh-page-stage {
    min-height: calc(100vh - 14.8rem - var(--cms-footer-height, 44px));
    padding: clamp(.8rem, 2.4vw, 1.8rem) 0 clamp(3rem, 7vw, 5rem);
}

.cms-template-kinderherberge .kh-page-stage > .cms-main {
    max-width: 75rem;
    min-height: 18rem;
    margin: 0 auto;
    padding: clamp(1.2rem, 3vw, 2.5rem);
    border: 1px solid rgb(255 255 255 / 72%);
    border-radius: 1.4rem;
    color: var(--kh-ink);
    background: rgb(255 255 252 / 92%);
    box-shadow: var(--kh-shadow);
    backdrop-filter: blur(7px);
}

.cms-template-kinderherberge .kh-page-stage > .cms-main.cms-main--boundaries {
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.cms-template-kinderherberge .cms-content-boundary,
.cms-template-kinderherberge .callout,
.cms-template-kinderherberge .card {
    border: 1px solid var(--kh-line);
    border-radius: 1rem;
    background: rgb(255 255 252 / 94%);
    box-shadow: 0 .5rem 1.5rem rgb(25 48 15 / 11%);
}

.cms-template-kinderherberge .cms-content-boundary {
    padding: clamp(1rem, 2.5vw, 1.7rem);
}

.cms-template-kinderherberge table.hover tbody tr.kh-table-section,
.cms-template-kinderherberge table.hover tbody tr.kh-table-section:hover {
    color: var(--kh-forest-950);
    background: var(--kh-leaf-100);
}

.cms-template-kinderherberge h1,
.cms-template-kinderherberge h2,
.cms-template-kinderherberge h3,
.cms-template-kinderherberge h4 {
    color: var(--kh-forest-950);
    font-weight: 750;
    letter-spacing: -.018em;
}

.cms-template-kinderherberge h1 {
    padding-bottom: .45rem;
    border-bottom: .22rem solid var(--kh-meadow-500);
}

.cms-template-kinderherberge .lead {
    color: var(--kh-forest-800);
}

.cms-template-kinderherberge .kh-page-stage a:not(.button) {
    color: var(--kh-forest-700);
    font-weight: 600;
    text-decoration-color: rgb(72 111 40 / 42%);
    text-decoration-thickness: .08em;
    text-underline-offset: .16em;
}

.cms-template-kinderherberge .kh-page-stage a:not(.button):hover,
.cms-template-kinderherberge .kh-page-stage a:not(.button):focus {
    color: var(--kh-meadow-600);
}

.cms-template-kinderherberge .button:not(.secondary):not(.warning):not(.alert) {
    border-radius: .55rem;
    background: var(--kh-forest-700);
    box-shadow: 0 .2rem .55rem rgb(72 111 40 / 24%);
    font-weight: 700;
}

.cms-template-kinderherberge .button:not(.secondary):not(.warning):not(.alert):hover,
.cms-template-kinderherberge .button:not(.secondary):not(.warning):not(.alert):focus {
    background: var(--kh-meadow-600);
}

.cms-template-kinderherberge .button.secondary {
    border-radius: .55rem;
    color: #fff;
    background: var(--kh-forest-800);
}

.cms-template-kinderherberge input:not([type="checkbox"]):not([type="radio"]),
.cms-template-kinderherberge select,
.cms-template-kinderherberge textarea {
    border-color: rgb(54 88 33 / 30%);
    border-radius: .45rem;
    background-color: #fff;
    box-shadow: inset 0 1px 2px rgb(25 48 15 / 8%);
}

.cms-template-kinderherberge input:not([type="checkbox"]):not([type="radio"]):focus,
.cms-template-kinderherberge select:focus,
.cms-template-kinderherberge textarea:focus {
    border-color: var(--kh-forest-700);
    box-shadow: 0 0 0 .18rem rgb(102 141 49 / 20%);
}

.cms-template-kinderherberge table {
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--kh-line);
    border-radius: .75rem;
}

.cms-template-kinderherberge thead,
.cms-template-kinderherberge thead tr {
    color: #fff;
    background: var(--kh-forest-900);
}

.cms-template-kinderherberge tbody tr:nth-child(even) {
    background: var(--kh-leaf-100);
}

.cms-template-kinderherberge .gallery-pro-introduction {
    margin-bottom: 1.2rem;
    color: var(--kh-muted);
}

.cms-template-kinderherberge .cms-gallery-grid img,
.cms-template-kinderherberge .cms-gallery-stage img {
    border-radius: .7rem;
}

.cms-template-kinderherberge :is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--kh-meadow-500);
    outline-offset: 3px;
}

.cms-template-kinderherberge .cms-footer {
    color: #fff;
    border-top: .22rem solid var(--kh-meadow-500);
    background: var(--kh-forest-950);
    box-shadow: 0 -.25rem .8rem rgb(21 39 13 / 22%);
}

.cms-template-kinderherberge .cms-footer a {
    color: #dceab8;
}

.cms-template-kinderherberge .cms-footer a:hover,
.cms-template-kinderherberge .cms-footer a:focus {
    color: #fff;
}

@media screen and (min-width: 64em) {
    body.cms-template-kinderherberge.cms-background-images-enabled {
        background-image: url("../images/Kinderherberge/BackgroundL.jpg") !important;
    }

    .cms-template-kinderherberge .cms-top-bar .menu > li > .cms-user-label.button.clear {
        height: 3.2rem;
        padding-top: .8rem;
        padding-bottom: .8rem;
    }
}

@media screen and (max-width: 74.9375em) {
    .cms-template-kinderherberge .cms-top-bar {
        flex-wrap: wrap;
    }

    .cms-template-kinderherberge .cms-top-bar-title {
        display: flex;
        align-items: center;
        min-height: 3rem;
    }

    .cms-template-kinderherberge #responsive-menu.kh-responsive-navigation {
        flex: 1 0 100%;
        flex-direction: column;
        width: 100%;
    }

    .cms-template-kinderherberge .kh-responsive-navigation .top-bar-left,
    .cms-template-kinderherberge .kh-responsive-navigation .top-bar-right {
        width: 100%;
    }

    .cms-template-kinderherberge .kh-responsive-navigation .menu {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    .cms-template-kinderherberge .kh-responsive-navigation .menu > li,
    .cms-template-kinderherberge .kh-responsive-navigation .menu > li > a,
    .cms-template-kinderherberge .kh-responsive-navigation .menu > li > .button.clear,
    .cms-template-kinderherberge .kh-responsive-navigation .menu > li > .cms-logout-form,
    .cms-template-kinderherberge .kh-responsive-navigation .menu > li > .cms-logout-form > .button.clear {
        width: 100%;
    }
}

@media screen and (min-width: 75em) {
    .cms-template-kinderherberge .cms-top-bar .menu > li > a,
    .cms-template-kinderherberge .cms-top-bar .menu > li > .button.clear,
    .cms-template-kinderherberge .cms-top-bar .menu > li > .cms-logout-form > .button.clear {
        padding-right: .62rem;
        padding-left: .62rem;
        font-size: .92rem;
    }
}

@media screen and (max-width: 63.9375em) {
    .cms-template-kinderherberge .kh-masthead-inner {
        min-height: 9.2rem;
    }

    .cms-template-kinderherberge .kh-logo {
        flex-basis: 8rem;
        width: 8rem;
        height: 6.4rem;
    }
}

@media screen and (max-width: 39.9375em) {
    body.cms-template-kinderherberge.cms-background-images-enabled {
        background-image: url("../images/Kinderherberge/BackgroundS.jpg") !important;
        background-position: center bottom !important;
        background-attachment: scroll !important;
    }

    .cms-template-kinderherberge .kh-masthead-inner {
        min-height: 7.4rem;
        padding: .65rem .8rem;
        gap: .8rem;
    }

    .cms-template-kinderherberge .kh-logo {
        flex-basis: 5.7rem;
        width: 5.7rem;
        height: 4.8rem;
        border-radius: .9rem;
    }

    .cms-template-kinderherberge .kh-kicker,
    .cms-template-kinderherberge .kh-quick-facts {
        display: none;
    }

    .cms-template-kinderherberge .kh-site-title {
        font-size: clamp(1.45rem, 8vw, 2rem) !important;
    }

    .cms-template-kinderherberge .kh-tagline {
        font-size: .83rem !important;
        line-height: 1.3;
    }

    .cms-template-kinderherberge .cms-top-bar {
        padding: .3rem .8rem;
    }

    .cms-template-kinderherberge .cms-top-bar .menu > li > a,
    .cms-template-kinderherberge .cms-top-bar .menu > li > .button.clear,
    .cms-template-kinderherberge .cms-top-bar .menu > li > .cms-logout-form > .button.clear {
        padding: .88rem 1rem;
    }

    .cms-template-kinderherberge .kh-page-stage {
        padding: .65rem 0 2.5rem;
    }

    .cms-template-kinderherberge .kh-page-stage > .cms-main {
        margin: 0 .45rem;
        padding: 1rem;
        border-radius: .9rem;
    }

    .cms-template-kinderherberge .kh-page-stage > .cms-main.cms-main--boundaries {
        margin: 0;
        padding-right: .45rem;
        padding-left: .45rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cms-template-kinderherberge *,
    .cms-template-kinderherberge *::before,
    .cms-template-kinderherberge *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}