:root {
    --dark: #231f20;
    --dark-trans: rgba(35, 31, 32, 0.9);
    --darker: #1d1a1b;
    --light: #eaeaea;
    --light-trans: rgba(234, 234, 234, 0.9);
    --accent-color: #8e793e;
    --accent-color-gloom: #ad974f;
    --bg-image: url('img/potter.png');
    --bg-termine: url('img/Theke.png');
	--bg-terminebg: url('img/terminebg.png');
    --bg-service: url('img/service.png');
    --bg-uberuns: url('img/wartezimmer.png');
	--bg-uberunsone: url('img/uberuns1.png');
    --bg-uberunstwo: url('img/uberuns2.png');
    --bg-uberunsthree: url('img/uberuns3.png');
    --bg-pflege: url('img/pflege.png');
	--bg-pflegebg: url('img/pflegebg.png');
    --bg-kontakt: url('img/eingang.png');
    --bg-map: url('img/map.png');
    --bg-collage: url('img/collage.png');
}

@font-face {
    font-family: "OpenSansNH";
    src: url('OpenSans.ttf') format('truetype');
}

.opensans {
    font-family: "OpenSansNH", sans-serif;
}

@font-face {
    font-family: "PoetsenOne-Regular";
    src: url('PoetsenOne-Regular.ttf') format('truetype');
}

.poetsenone {
    font-family: "PoetsenOne-Regular", sans-serif;
}


body {
    font-family: "Lucida Sans", sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--dark);
    color: var(--light);
}

<!-- header { -->
    <!-- text-align: center; -->
    <!-- padding: 10px 0 0 0; -->
    <!-- background-color: var(--darker); -->
    <!--
}
-->

a {
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: var(--accent-color);
    padding: 14px 16px;
    display: inline-block;
    transition: background-color 0.3s;
}

    a:hover {
        color: var(--accent-color-gloom);
    }

.bold {
    font-weight: bold;
}

.fat {
    font-weight: bold;
    text-transform: uppercase;
}

nav {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 100%;
    text-align: center;
    background-color: var(--darker);
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--accent-color);
}

.nav-hidden {
    top: -60px;
}

nav a {
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: var(--accent-color);
    padding: 14px 16px;
    display: inline-block;
    transition: background-color 0.3s;
}

    nav a:hover {
        color: var(--light);
        background-color: var(--accent-color-gloom);
    }

    nav a.active {
        color: var(--light);
        background-color: var(--accent-color);
    }

#menu-icon {
    display: none;
}

section {
    min-height: 100vh;
    max-width: 100%;
    overflow: hidden;
    padding-top: 70px;
    padding-bottom: 70px;
    padding-left: 10%;
    padding-right: 10%;
    background-color: var(--light);
    color: var(--dark);
}

    section:first-of-type {
        padding-top: 0;
    }

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-left {
    display: flex;
    justify-content: left;
    align-items: left;
}

.flex-right {
    display: flex;
    justify-content: right;
    align-items: right;
}

footer {
    text-align: center;
    padding: 10px 0;
    background-color: var(--darker);
    color: var(--accent-color);
    position: relative;
    bottom: 0;
    width: 100%;
    border-top: 1px solid var(--accent-color-gloom);
}

    footer a {
        color: var(--accent-color);
        font-weight: bold;
        text-decoration: none;
        margin: 0 10px;
    }

        footer a:hover {
            color: var(--light);
            background-color: var(--accent-color-gloom);
        }

.logo {
    max-height: 100px;
}

.bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease-in-out;
}

.imghome {
    background-image: var(--bg-image);
}

.imgtermine {
    background-image: var(--bg-termine);
}

.imgterminebg {
	background-image: var(--bg-terminebg);
}

.imgservice {
    background-image: var(--bg-service);
}

.imguberuns {
    background-image: var(--bg-uberuns);
}

.imgpflege {
    background-image: var(--bg-pflege);
}

.imgpflegebg {
	background-image: var(--bg-pflegebg);
}

.imgkontakt {
    background-image: var(--bg-kontakt);
}

.imgmap {
    background-image: var(--bg-map);
    min-height: 300px;
    width: auto;
}



.cont {
    background-color: var(--dark-trans);
    color: var(--light);
    max-width: 600px;
    min-height: 200px;
    padding: 20px;
    text-align: justify;
}

#home {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--dark);
    color: var(--light);
}

    #home h1, #pflege h1, #termine h1, #service h1 {
        text-align: center;
    }

    #uberuns h1, #kontakt h1, #service h1
    {
        max-width: 450px;
    }

        #termine h1
        {
            margin-bottom: 50px;
        }

        #termine .centered-div {
            background-color: var(--light-trans);
            padding: 50px;
            min-width: 80%;
            border: 1px solid var(--accent-color);
            text-align: center;
        }


#service .sbox {
    display: flex;
    flex: 1;
    flex-direction: column;
    text-align: justify;
}

#service .centered-div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.price-item {
    background-color: var(--dark);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px var(--dark);
}

    .price-item h2 {
        color: var(--light-trans);
        font-size: 1.5em;
        margin-bottom: 10px;
    }

    .price-item p {
        margin: 0;
        color: var(--light);
    }

        .price-item p.tag {
            margin-top: 20px;
            color: var(--accent-color);
            font-size: 1.2em;
            font-weight: bold;
            text-align: right;
        }

.image.collage {
    background-image: var(--bg-collage);
    flex: 1;
    border-radius: 0;
    margin-top: 20%;
    margin-left: 50px;
    background-size: contain;
    background-repeat: no-repeat;
}


#pflege, #termine {
    border-top: 1px solid var(--accent-color);
    border-bottom: 1px solid var(--accent-color);
}

#pflege .centered-div {
    background-color: var(--dark-trans);
    padding: 20px;
    border: 1px solid var(--accent-color);
}

#pflege h3 {
    padding-top: 20px;
    color: var(--accent-color);
}

.weitercontainer
{
    display: none;
}

#impressum {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--dark-trans);
    color: var(--light);
}

#kontakt h1, .contact-info {
    min-width: 350px;
}

#kontakt .centered-div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.info-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.contact-info,
.additional-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.additional-info {
    <!-- max-width: calc(90% - 350px); -->
    min-width: 300px;
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

    .info-item svg {
        margin-right: 10px;
    }

#kontakt a {
    padding: 0;
}

#kontakt img, .info-container {
    max-width: 100%;
    max-height: 60vh;
    margin-bottom: 10px; 
}




.logo-container img {
    width: 20vh; 
    height: auto;
}

.box-container {
    display: flex;
}

.link-box {
    display: flex;
    width: 40vh; 
    aspect-ratio: 4 / 3;
    background-color: black;
    margin-right: 3px; 
    margin-bottom: 3px;
    border-radius: 20px;
}

    .link-box p {
        display: none;
        align-self: flex-end;
        padding: 10px;
        background-color: var(--dark-trans);
        font-weight: bold;
    }

.box-container:hover .link-box {
    filter: blur(3px);
    opacity: .5;
    transform: scale(.98);
    box-shadow: none;
    cursor: pointer;
}

    .box-container:hover .link-box:hover {
        transform: scale(1);
        filter: blur(0px);
        opacity: 1;
        box-shadow: 0 8px 20px 0px rgba(0,0,0,0.125);
    }

        .box-container:hover .link-box:hover p {
            display: block;
        }

h1 {
    letter-spacing: 5px;
    font-family: "PoetsenOne-Regular", sans-serif;
    font-weight: bold;
    font-size: 2.5em;
    background: linear-gradient(to right, var(--accent-color-gloom), var(--accent-color));
    -webkit-background-clip: text;
    color: transparent;
    border-bottom: 1px solid var(--accent-color-gloom);
    border-top: 1px solid var(--accent-color-gloom);
    padding: 5px 0px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.column {
    flex: 1;
    min-width: 200px;
    height: 600px;
    overflow: hidden;
    padding: 15px;
    box-sizing: border-box;
    cursor: pointer;
    transition: flex 0.5s;
    margin-left: 10px;
    margin-right: 10px;
    border: 1px solid var(--accent-color);
    background-color: var(--light-trans);
    color: var(--dark);
    text-align: justify;
}

    .column:hover {
        background-color: var(--dark-trans);
        color: var(--light);
    }

.expanded {
    flex: 20;
    overflow: auto;
}


.about-us-section {
    text-align: center;
}

.image-text-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    overflow: hidden;
    height: 0;
    opacity: 0;
    transform: translateX(-100%); 
    transition: opacity 1s ease, transform 1s ease; 
}

    .image-text-container.active {
        height: 500px;
        opacity: 1;
        transform: translateX(0);
    }

.image {
    width: 700px;
    height: 500px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
}

    .image.one, .nav-button.one {
        background-image: var(--bg-uberunsone);
    }

    .image.two, .nav-button.two {
        background-image: var(--bg-uberunstwo);
    }

    .image.three, .nav-button.three {
        background-image: var(--bg-uberunsthree);
    }



    .text {
        flex: 5;
        padding: 20px;
        text-align: justify;
    }

.navigation-buttons {
    display: flex;
    justify-content: center;
}

.nav-button {
    width: 75px;
    height: 75px;
    margin: 0 10px;
    border-radius: 50%;
    background-color: #ccc;
    background-image: var(--bg-uberuns);
    background-size: cover;
    background-position: center;
    border: none;
    outline: none;
    cursor: pointer;
}

    .nav-button.active {
        border: 2px solid var(--accent-color-gloom);
    }

/*Animation*/
.delay-1 {
    animation-delay: 1s;
}

.delay-2 {
    animation-delay: 2s;
}

.delay-3 {
    animation-delay: 3s;
}

.delay-4 {
    animation-delay: 4s;
}

.animation {
    opacity: 0;
}

.fadeIn {
    animation: fadeIn 3s ease-in-out forwards;
}

.slideIn-top {
    -webkit-animation: slide-in-top 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-top 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slideIn-tr {
    -webkit-animation: slide-in-tr 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-tr 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slideIn-right {
    -webkit-animation: slide-in-right 1s cubic-bezier(.25,.46,.45,.94) both;
    animation: slide-in-right 1s cubic-bezier(.25,.46,.45,.94) both
}

.slideIn-br {
    -webkit-animation: slide-in-br 2s cubic-bezier(.25,.46,.45,.94) both;
    animation: slide-in-br 2s cubic-bezier(.25,.46,.45,.94) both
}

.slideIn-bottom {
    -webkit-animation: slide-in-bottom 2s cubic-bezier(.25,.46,.45,.94) both;
    animation: slide-in-bottom 2s cubic-bezier(.25,.46,.45,.94) both
}

.slideIn-bl {
    -webkit-animation: slide-in-bl 2s cubic-bezier(.25,.46,.45,.94) both;
    animation: slide-in-bl 2s cubic-bezier(.25,.46,.45,.94) both
}

.slideIn-left {
    -webkit-animation: slide-in-left 1s cubic-bezier(.25,.46,.45,.94) both;
    animation: slide-in-left 1s cubic-bezier(.25,.46,.45,.94) both
}

.slideIn-tl {
    -webkit-animation: slide-in-tl 2s cubic-bezier(.25,.46,.45,.94) both;
    animation: slide-in-tl 2s cubic-bezier(.25,.46,.45,.94) both
}

.scaleIn-center {
    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.swirlIn-bck {
    -webkit-animation: swirl-in-bck 1s ease-out both;
    animation: swirl-in-bck 1s ease-out both;
}

.slide-in-elliptic-right-bck {
    -webkit-animation: slide-in-elliptic-right-bck 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-elliptic-right-bck 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/*Keyframes*/
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes slide-in-tr {
    0% {
        -webkit-transform: translateY(-1000px) translateX(1000px);
        transform: translateY(-1000px) translateX(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-tr {
    0% {
        -webkit-transform: translateY(-1000px) translateX(1000px);
        transform: translateY(-1000px) translateX(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@-webkit-keyframes slide-in-br {
    0% {
        -webkit-transform: translateY(1000px) translateX(1000px);
        transform: translateY(1000px) translateX(1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
        opacity: 1
    }
}

@keyframes slide-in-br {
    0% {
        -webkit-transform: translateY(1000px) translateX(1000px);
        transform: translateY(1000px) translateX(1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
        opacity: 1
    }
}

@-webkit-keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@-webkit-keyframes slide-in-bl {
    0% {
        -webkit-transform: translateY(1000px) translateX(-1000px);
        transform: translateY(1000px) translateX(-1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
        opacity: 1
    }
}

@keyframes slide-in-bl {
    0% {
        -webkit-transform: translateY(1000px) translateX(-1000px);
        transform: translateY(1000px) translateX(-1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
        opacity: 1
    }
}

@-webkit-keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@-webkit-keyframes slide-in-tl {
    0% {
        -webkit-transform: translateY(-1000px) translateX(-1000px);
        transform: translateY(-1000px) translateX(-1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
        opacity: 1
    }
}

@keyframes slide-in-tl {
    0% {
        -webkit-transform: translateY(-1000px) translateX(-1000px);
        transform: translateY(-1000px) translateX(-1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
        opacity: 1
    }
}

@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes swirl-in-bck {
    0% {
        -webkit-transform: rotate(540deg) scale(5);
        transform: rotate(540deg) scale(5);
        opacity: 0;
    }

    100% {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}

@keyframes swirl-in-bck {
    0% {
        -webkit-transform: rotate(540deg) scale(5);
        transform: rotate(540deg) scale(5);
        opacity: 0;
    }

    100% {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes slide-in-elliptic-right-bck {
    0% {
        -webkit-transform: translateX(800px) rotateY(30deg) scale(6.5);
        transform: translateX(800px) rotateY(30deg) scale(6.5);
        -webkit-transform-origin: -100% 50%;
        transform-origin: -100% 50%;
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0) rotateY(0) scale(1);
        transform: translateX(0) rotateY(0) scale(1);
        -webkit-transform-origin: 600px 50%;
        transform-origin: 600px 50%;
        opacity: 1;
    }
}

@keyframes slide-in-elliptic-right-bck {
    0% {
        -webkit-transform: translateX(800px) rotateY(30deg) scale(6.5);
        transform: translateX(800px) rotateY(30deg) scale(6.5);
        -webkit-transform-origin: -100% 50%;
        transform-origin: -100% 50%;
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0) rotateY(0) scale(1);
        transform: translateX(0) rotateY(0) scale(1);
        -webkit-transform-origin: 600px 50%;
        transform-origin: 600px 50%;
        opacity: 1;
    }
}