html {
    background: #222;
    overflow: hidden;
    width: 100vw;
    height: 100dvh;
}

@media (prefers-color-scheme: dark) {
    html {
        background: #222;
    }
}

* {
    user-select: none;
    color: #fefefe;
    font-family: "Times New Roman", Times, serif;
}

.impDat a,
#impressum h2,
#datenschutz h2 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3 {
    margin: 0;
}

summary {
    list-style: none;
}

@supports (-webkit-touch-callout: none) {
    summary::-webkit-details-marker {
        display: none;
    }
}





#pension::-webkit-scrollbar,
#galerie::-webkit-scrollbar {
    width: 0.5em;
}

@media (max-width: 760px) and (orientation: portrait) {

    #pension::-webkit-scrollbar,
    #galerie::-webkit-scrollbar {
        width: 1vw;
    }
}

#pension::-webkit-scrollbar-track,
#galerie::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 0px;
}

#pension::-webkit-scrollbar-thumb,
#galerie::-webkit-scrollbar-thumb {
    background: #ff000080;
    border-radius: 0px;
    border: 0px solid transparent;
    cursor: pointer;
}

@supports not selector(::-webkit-scrollbar) {

    #pension,
    #galerie {
        scrollbar-color: #ff000080 transparent;
    }
}








.container {
    height: 100vh;
}

@media (max-width: 760px) and (orientation:portrait) {
    .container {
        height: 100dvh;
        width: 100dvw;
    }
}

@media (max-width: 999px) and (orientation:landscape) {
    .container {
        height: 100dvh;
        width: 100dvw;
    }
}



.container .hinterSlider {
    overflow: hidden;
    height: 100dvh;
    width: 100dvw;
    position: absolute;
}



.container .hintergrund {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: cover;
    background-position-x: bottom;
    opacity: 0;
    z-index: -1;

    animation: bildAustausch 110s linear infinite;
    /*    animation-fill-mode: backwards;*/
    will-change: opacity;
}

.container .hintergrund_1 {
    background-image: url(../images/hintergrund/bild-1_d-1920.jpg);
    animation-delay: 0s;
}

.container .hintergrund_2 {
    background-image: url(../images/hintergrund/bild-2_d-1920.jpg);
    animation-delay: 10s;
}

.container .hintergrund_3 {
    background-image: url(../images/hintergrund/bild-3_d-1920.jpg);
    animation-delay: 20s;
}

.container .hintergrund_4 {
    background-image: url(../images/hintergrund/bild-13_d-1920.jpg);
    animation-delay: 30s;
}

.container .hintergrund_5 {
    background-image: url(../images/hintergrund/bild-5_d-1920.jpg);
    animation-delay: 40s;
}

.container .hintergrund_6 {
    background-image: url(../images/hintergrund/bild-6_d-1920.jpg);
    animation-delay: 50s;
}

.container .hintergrund_7 {
    background-image: url(../images/hintergrund/bild-7_d-1920.jpg);
    animation-delay: 60s;
}

.container .hintergrund_8 {
    background-image: url(../images/hintergrund/bild-8_d-1920.jpg);
    animation-delay: 70s;
}

.container .hintergrund_9 {
    background-image: url(../images/hintergrund/bild-9_d-1920.jpg);
    animation-delay: 80s;
}

.container .hintergrund_10 {
    background-image: url(../images/hintergrund/bild-10_d-1920.jpg);
    animation-delay: 90s;
}

.container .hintergrund_11 {
    background-image: url(../images/hintergrund/bild-11_d-1920.jpg);
    animation-delay: 100s;
}






@media (max-width: 760px) and (orientation:portrait) {
    .container .hintergrund_1 {
        background-image: url(../images/hintergrund/bild-1_h-760.jpg);
    }

    .container .hintergrund_2 {
        background-image: url(../images/hintergrund/bild-2_h-760.jpg);
    }

    .container .hintergrund_3 {
        background-image: url(../images/hintergrund/bild-3_h-760.jpg);
    }

    .container .hintergrund_4 {
        background-image: url(../images/hintergrund/bild-13_h-760.jpg);
    }

    .container .hintergrund_5 {
        background-image: url(../images/hintergrund/bild-5_h-760.jpg);
    }

    .container .hintergrund_6 {
        background-image: url(../images/hintergrund/bild-6_h-760.jpg);
    }

    .container .hintergrund_7 {
        background-image: url(../images/hintergrund/bild-7_h-760.jpg);
    }

    .container .hintergrund_8 {
        background-image: url(../images/hintergrund/bild-8_h-760.jpg);
    }

    .container .hintergrund_9 {
        background-image: url(../images/hintergrund/bild-9_h-760.jpg);
    }

    .container .hintergrund_10 {
        background-image: url(../images/hintergrund/bild-10_h-760.jpg);
    }

    .container .hintergrund_11 {
        background-image: url(../images/hintergrund/bild-11_h-760.jpg);
    }
}




@keyframes bildAustausch {
    0% {
        opacity: 0;
        transform: scale(1.1);
    }

    2% {
        opacity: 1;
        transform: scale(1.05);
    }

    10% {
        opacity: 1;
        transform: scale(1);
    }

    11% {
        opacity: 0;
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
    }
}




/* 4 Bilder
@keyframes bildAustausch {
  0%   { opacity: 0; transform: scale(1.1); }
  5%   { opacity: 1; transform: scale(1.05); }
  22%  { opacity: 1; transform: scale(1); }
  27%  { opacity: 0; transform: scale(1.1); }
  100% { opacity: 0; }
}
'/
/* 6 Bilder
@keyframes bildAustausch {
  0%   { opacity: 0; transform:scale(1.1) }
  5%   { opacity: 1; transform:scale(1.05) }
  9%   { opacity: 1; transform:scale(1) }
  11%  { opacity: 1; transform:scale(1) }
  15%  { opacity: 1; transform:scale(1.05) }
  20%  { opacity: 0; transform:scale(1.1) }
  100% { opacity: 0; }
}
*/

/*
@keyframes bildAustausch {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  15%  { opacity: 1; }
  20%  { opacity: 0; }
  100% { opacity: 0; }
}
*/
























.slogan {
    position: absolute;
    /*    top: 12%;*/
    /*    left: 9%;*/

    top: 9%;
    left: 7%;
    width: 14%;

    padding: 2% 2% 2% 2%;
    border-radius: 16px;
    backdrop-filter: blur(1px);
    /* box-shadow: 0 0 15px 0 #444; */
    z-index: 10;
}


@media (max-width: 1024px) and (orientation:portrait) {
    .slogan {
        width: 47%;
        top: 14%;
    }

    .container:has(#impressum:target) .slogan,
    .container:has(#datenschutz:target) .slogan,
    .container:has(#pension:target) .slogan,
    .container:has(#galerie:target) .slogan {
        top: 11%;
        left: 4%;
        width: 20%;
    }
}

@media (max-width: 760px) and (orientation:portrait) {
    .slogan {
        top: 33vw;
    }

    .container:has(#impressum:target) .slogan,
    .container:has(#datenschutz:target) .slogan,
    .container:has(#pension:target) .slogan,
    .container:has(#galerie:target) .slogan {
        top: inherit;
        bottom: 11%;
        left: 18%;
        width: 13%;
    }

}






.slogan h1 {
    /* font-size: 7rem; */
    /* font-size: 4.4vw; */
    font-size: clamp(32px, 4.4vw, 150px);
    font-weight: 100;
}








.logo {
    display: none;

    position: absolute;
    width: 36%;
    bottom: 9%;
    /*    right: 6%;*/
    right: clamp(0px, 13vw, 130px);
    padding: 2% 2% 0% 2%;
    /* background: red; */
    border-radius: 16px;
    /*    backdrop-filter: blur(1px);*/
    /* box-shadow: 0 0 15px 0 #444; */
    pointer-events: none;
    transition: 0.3s;

    width: clamp(0px, 30vw, calc(200px + 3vw));
    bottom: 9.5%;
    right: 4%;
}

@media (max-width: 1024px) and (orientation:landscape) {
    .logo {
        width: clamp(0px, 30vw, calc(130px + 3vw));
    }
}

@media (max-width: 768px) and (orientation:portrait) {
    .logo {
        top: 15%;
        left: 5%;
    }
}

@media (max-width: 760px) and (orientation:portrait) {
    .logo {
        /*        width: 78vw;*/
        /*        right: 6vw;*/
        /*        bottom: 22vw;*/

        right: inherit;
        /*        width: 42vw;*/
        /*        bottom: 24vw;*/
        /*        left: 2vw;*/

        bottom: 84px;
        width: 30vw;
        left: 7vw;
    }
}

.logo img {
    width: 65%;
}





.impDat {
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

@media (max-width: 760px) and (orientation:portrait) {
    .impDat {
        bottom: 1em;
        justify-content: center;
    }
}

.impDat a {
    margin: 1vw 1vw clamp(0px, 1vw, 16px) 1vw;
    padding: 1vw 1vw 1vw 1vw;
    text-decoration: none;
    font-size: clamp(16px, 2.4vw, 24px);
    text-transform: uppercase;
}

.impDat a:nth-of-type(2) {
    margin: 1vw auto clamp(0px, 1vw, 16px) 1vw;
}

.impDat a:nth-last-of-type(1) {
    margin: 1vw 4vw clamp(0px, 1vw, 16px) 1vw;
}

@media (max-width: 760px) and (orientation:portrait) {
    .impDat {
        flex-wrap: wrap;
    }

    .impDat a {
        width: 25%;
        margin: 1vw 10%;
        text-align: center;
    }

    .impDat a:nth-of-type(1) {
        order: 4;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .impDat a:nth-of-type(2) {
        order: 5;
        margin: 1vw 10%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .impDat a:nth-of-type(3) {
        order: 1;
    }

    .impDat a:nth-of-type(4) {
        order: 2;
    }

    .impDat a:nth-of-type(5) {
        order: 3;
    }

    .impDat a:nth-last-of-type(1) {
        order: 0;
        opacity: 1;
        /*pointer-events: none;*/
        margin: 1vw 10%;
    }
}

.impDat a:hover {
    text-decoration: underline;
}




#impressum,
#datenschutz,
#pension,
#galerie {
    display: none;

    position: absolute;
    width: calc(50% - 6%);
    margin: 1vw;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 4% 3% 3% 3%;
    background: #fefefe;
    z-index: 1;
}

@media (max-width: 1024px) and (orientation:landscape) {
    #datenschutz {
        width: calc(90% - 6%);
        font-size: 0.8em;
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    #datenschutz {
        width: calc(90% - 6%);
    }
}

@media (max-width: 768px) and (orientation:portrait) {
    #datenschutz {
        width: calc(90% - 6%);
        font-size: 0.8em;
    }
}

@media (max-width: 999px) and (orientation:landscape) {

    #impressum,
    #datenschutz,
    #pension,
    #galerie {
        width: calc(90% - 6%);
        height: 72vh;
        font-size: 0.8em;
        overflow: scroll;
    }
}

@media (max-width: 760px) and (orientation:portrait) {

    #impressum,
    #datenschutz,
    #pension,
    #galerie {
        width: calc(90% - 6%);
        font-size: 2.25vw;
    }
}

#impressum *,
#datenschutz *,
#pension *,
#galerie * {
    color: #333333;
}

#impressum h2,
#datenschutz h2,
#pension h2,
#galerie h2 {
    font-size: 3em;
}

#impressum h3,
#datenschutz h3,
#pension h3,
#galerie h3 {
    margin: 0.25em 0;
    font-size: 1.5em;
}

#impressum p,
#datenschutz p,
#pension p,
#galerie p {
    font-size: 1.2em;
}

#impressum a,
#datenschutz a,
#pension a,
#galerie a {
    text-decoration: none;
}

#impressum a:hover,
#datenschutz a:hover,
#pension a:hover,
#galerie a:hover {
    text-decoration: underline;
}


#datenschutz details summary {
    cursor: pointer;
}

#datenschutz details summary:hover h3 {
    text-decoration: underline;
}

#datenschutz details summary ~ * {
    padding: 0 0 0 1em;
}

#datenschutz details summary ~ ul {
    padding: 0 0 0 2.2em;
}





/*
#datenschutz summary::details-content {
	transition: all 0s ease, content-visibility 0s ease allow-discrete; 
	height: 0;
}
@supports (interpolate-size: allow-keywords) {
  #datenschutz summary[open]::details-content {
		height: auto;
	  transition: all 0.5s ease, content-visibility 0.5s ease allow-discrete;
	}
}
@supports not (interpolate-size: allow-keywords) {
  #datenschutz summary[open]::details-content {
    height: 30em;
	}
}
*/



#datenschutz details::details-content {
    transition: all 0.5s ease, content-visibility 0.5s ease allow-discrete;
    height: 0;
    overflow: clip;
}

@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }

    #datenschutz details[open]::details-content {
        height: auto;
        padding-bottom: 0.5em;
    }
}

@supports not (interpolate-size: allow-keywords) {
    #datenschutz details[open]::details-content {
        height: auto;
        overflow: visible;
    }

    /*
  [data-browser="firefox"] .akko > div {
    opacity: 0;
  }
  [data-browser="firefox"] .akko[open] > div {
    opacity: 1;
    transition-delay: 0.2s;
    transition-duration: 0.3s;
  }
    */
}














.container:has(#impressum:target) #impressum,
.container:has(#datenschutz:target) #datenschutz {
    display: block;
}

.container:has(#pension:target) #pension,
.container:has(#galerie:target) #galerie {
    display: flex;
}

/*
.container:has(#impressum:target) .slogan,
.container:has(#impressum:target) .logo,
.container:has(#datenschutz:target) .slogan,
.container:has(#datenschutz:target) .logo {
    opacity: 0;
    transition: 0.3s;
}
*/

.container:has(#impressum:target) .slogan,
.container:has(#datenschutz:target) .slogan {
    /*    opacity: 0;*/
    /*    transition: 0.3s;*/
}

.container:has(#pension:target) .slogan svg path:nth-of-type(1),
.container:has(#galerie:target) .slogan svg path:nth-of-type(1) {
    /*    fill: #fefefe;*/
}

.container:has(#pension:target) .slogan svg path:nth-of-type(3),
.container:has(#galerie:target) .slogan svg path:nth-of-type(3) {
    /*    fill: transparent;*/
}

@media (max-width: 760px) and (orientation:portrait) {

    .container:has(#pension:target) .slogan,
    .container:has(#galerie:target) .slogan {
        /*        display: none;*/
    }
}

.container:has(#impressum:target) .logo,
.container:has(#datenschutz:target) .logo,
.container:has(#pension:target) .logo,
.container:has(#galerie:target) .logo {
    /*    width: 8%;*/
    /*    bottom: 2.5%;*/

    /*    width: 17%;*/

    /*    width: clamp(0px, 30vw, calc(325px + 3vw));*/
    /*    bottom: 9.5%;*/
    /*    right: 1%;*/

    /*    display: block;*/

    z-index: 1;
    cursor: pointer;
    pointer-events: all;
}

.container:has(#pension:target) .logo,
.container:has(#galerie:target) .logo {
    z-index: 10;
}

@media (max-width: 1024px) and (orientation:portrait) {

    .container:has(#impressum:target) .logo,
    .container:has(#datenschutz:target) .logo,
    .container:has(#pension:target) .logo,
    .container:has(#galerie:target) .logo {
        /*        bottom: 1.25%;*/
        bottom: 5.5%;
        right: initial;
        left: 1%;
        top: initial;
    }
}

@media (max-width: 768px) and (orientation:portrait) {

    .container:has(#impressum:target) .logo,
    .container:has(#datenschutz:target) .logo,
    .container:has(#pension:target) .logo,
    .container:has(#galerie:target) .logo {
        height: initial;
        width: clamp(0px, 30vw, calc(160px + 3vw));
    }
}

@media (max-width: 760px) and (orientation:landscape) {

    .container:has(#impressum:target) .logo,
    .container:has(#datenschutz:target) .logo,
    .container:has(#pension:target) .logo,
    .container:has(#galerie:target) .logo {
        width: 15%;
        right: 8%;
    }
}

@media (max-width: 760px) and (orientation:portrait) {

    .container:has(#impressum:target) .logo,
    .container:has(#datenschutz:target) .logo,
    .container:has(#pension:target) .logo,
    .container:has(#galerie:target) .logo {
        /*        width: 50vw;*/
        /*        bottom: 9%;*/
        /*        right: initial;*/
        /*        left: 50%;*/
        /*        transform: translateX(-50%);*/

        /*            width: 78vw;*/
        /*            right: 6vw;*/
        /*            bottom: 22vw;*/

        /*            width: 50vw;*/
        /*            right: 15vw;*/

        top: initial;
        bottom: 84px;
        width: 30vw;
        left: 7vw;
    }
}





.logo svg path {
    transition: 0.3s;
}

/* .fil1 {fill:#b1c820} */
/* .fil2 {fill:#dd2a1b} */
.container:has(#impressum:target) .logo svg .fil1,
.container:has(#datenschutz:target) .logo svg .fil1,
.container:has(#pension:target) .logo svg .fil1,
.container:has(#galerie:target) .logo svg .fil1 {
    /*    fill:#b1c820;*/
    transition: 0.3s;
}

.container:has(#impressum:target) .logo svg .fil2,
.container:has(#datenschutz:target) .logo svg .fil2,
.container:has(#pension:target) .logo svg .fil2,
.container:has(#galerie:target) .logo svg .fil2 {
    /*    fill:#dd2a1b;*/
    transition: 0.3s;
}

.container:has(#impressum:target) .logo:hover svg .fil1,
.container:has(#datenschutz:target) .logo:hover svg .fil1,
.container:has(#pension:target) .logo:hover svg .fil1,
.container:has(#galerie:target) .logo:hover svg .fil1 {
    /*    fill:#fefefe;*/
    fill: #b1c820;
    transition: 0.3s;
}

.container:has(#impressum:target) .logo:hover svg .fil2,
.container:has(#datenschutz:target) .logo:hover svg .fil2,
.container:has(#pension:target) .logo:hover svg .fil2,
.container:has(#galerie:target) .logo:hover svg .fil2 {
    /*    fill:#fefefe;*/
    fill: #dd2a1b;
    transition: 0.3s;
}

@media (max-width: 760px) and (orientation:portrait) {

    .container:has(#impressum:target) .logo svg .fil2,
    .container:has(#datenschutz:target) .logo svg .fil2,
    .container:has(#pension:target) .logo svg .fil2,
    .container:has(#galerie:target) .logo svg .fil2 {
        fill: transparent;
        transition: 0.3s;
    }
}



#impressum .linkKill,
#datenschutz .linkKill,
#pension .linkKill,
#galerie .linkKill {
    position: absolute;
    padding: 0 0.25em 0.1em 0.25em;
    top: 0.5em;
    right: 0.5em;
    border: 1px solid #ddd;
    color: #ccc;
    font-size: 3em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    transition: 0.3s;
}

#impressum .linkKill:hover,
#datenschutz .linkKill:hover,
#pension .linkKill:hover,
#galerie .linkKill:hover {
    text-decoration: none;
    border: 1px solid #333;
    color: #333;
    transition: 0.3s;
}
















/* Pension Galerie */

#pension,
#galerie {
    background: transparent;
    /*    top: 27%;*/
    /*    top: 4vh;*/
    top: 12vh;
    transform: translate(-50%, 0%);
    backdrop-filter: blur(8px);
    padding: 0% 4% 0% 4%;
    margin: 0 1vw;
    /*    max-height: calc(83vh - 4%);*/
    /*    max-height: calc(91vh - calc(100vh * 0.04));*/
    max-height: calc(85vh - calc(100vh * 0.04));
    font-size: 0.8em;
    overflow-y: auto;
    flex-wrap: wrap;
    transition: background 0.3s;
}

@media (max-width: 1024px) and (orientation:portrait) {

    #pension,
    #galerie {
        width: calc(64% - 6%);
        max-height: calc(83vh - calc(100vh * 0.04));
        left: 60%;
        top: 15%;
    }
}

@media (max-width: 768px) and (orientation:portrait) {

    #pension,
    #galerie {
        max-height: calc(79vh - calc(100vh * 0.04));
        top: 19%;
    }
}

@media (max-width: 760px) and (orientation:portrait) {

    #pension,
    #galerie {
        /*        width: calc(84% - 6%);*/
        /*        max-height: 59vh;*/
        /*        left: 48%;*/
        /*        top: 21%;*/
        /*        top: 43vw;*/
        /*        clip-path: polygon(28% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 28%, 28% 28%);*/

        width: calc(100% - 12vw);
        margin: 0;
        padding: 0 6vw;
        left: 0;
        top: 18vh;
        transform: translate(0, 0);
        max-height: 59vh;
    }
}

#pension:hover {
    background: #75860599;
    transition: background 0.3s;
}

#pension > div,
#galerie > div {
    /*    width: 50%;*/
    width: calc(50% - 4em);
    padding: 2em;
}

@media (max-width: 760px) and (orientation:portrait) {

    #pension > div,
    #galerie > div {
        width: 100%;
        padding: 2em;
    }
}

#pension > div:nth-of-type(1),
#galerie > div:nth-of-type(1) {
    width: 100%;
    margin: 0 0 6em 0;
    padding: 0;
}

#pension > div:nth-last-of-type(2) {
    margin: 0 0 6em 0;
}

@media (max-width: 760px) and (orientation:portrait) {
    #pension > div:nth-last-of-type(2) {
        margin: 0;
    }
}

#pension h2,
#galerie h2 {
    width: 100%;
    color: #fefefe;
    font-size: 6vw;
    font-weight: 100;
    line-height: 1;
    margin: 0.5em 0 0.5em 0;
    filter: drop-shadow(1px 1px 2px black);
}

@media (max-width: 1024px) and (orientation:portrait) {

    #pension h2,
    #galerie h2 {
        font-size: 9vw;
    }
}

@media (max-width: 768px) and (orientation:portrait) {

    #pension h2,
    #galerie h2 {
        font-size: 9vw;
    }
}

@media (max-width: 760px) and (orientation:portrait) {

    #pension h2,
    #galerie h2 {
        /*        margin: 2vw 0 8vw 24vw;*/
        font-size: 9vw;
    }
}

#pension h3,
#galerie h3 {
    margin: 0;
    color: #fefefe;
    white-space: nowrap;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: clamp(0px, 3.5vw, 38px);
    font-weight: 400;
    filter: drop-shadow(1px 1px 2px black);
}

@media (max-width: 1366px) and (orientation:landscape) {

    #pension h3,
    #galerie h3 {
        font-size: clamp(0px, 3.5vw, 28px);
    }
}

@media (max-width: 1024px) and (orientation:landscape) {

    #pension h3,
    #galerie h3 {
        font-size: clamp(0px, 3.5vw, 24px);
    }
}

@media (max-width: 1024px) and (orientation:portrait) {

    #pension h3,
    #galerie h3 {
        font-size: clamp(0px, 3vw, 32px);
    }
}

@media (max-width: 768px) and (orientation:portrait) {

    #pension h3,
    #galerie h3 {
        font-size: clamp(0px, 3vw, 32px);
    }
}

@media (max-width: 760px) and (orientation:portrait) {

    #pension h3,
    #galerie h3 {
        margin: 0 0 0.25em 0em;
        font-size: 6.5vw;
    }
}

#pension > div h3,
#galerie > div h3 {
    margin: 0 0 0.25em -0.5em;
}

#pension p,
#galerie p {
    margin: 0 0 0.25em 0;
    color: #fefefe;
    /*    white-space: nowrap;*/
    /*    font-size: clamp(0px, 3.5vw, 60px);*/
    font-size: clamp(0px, 4vw, 24px);
    filter: drop-shadow(1px 1px 2px black);
}

@media (max-width: 1024px) and (orientation:portrait) {

    #pension p,
    #galerie p {
        font-size: 2.5vw;
    }
}

@media (max-width: 768px) and (orientation:portrait) {

    #pension p,
    #galerie p {
        font-size: 2.5vw;
    }
}

@media (max-width: 760px) and (orientation:portrait) {

    #pension p,
    #galerie p {
        font-size: 5vw;
    }
}

#pension .linkKill,
#galerie .linkKill {
    border: 1px solid #fefefeaa;
    color: #fefefeaa;
}

@media (max-width: 760px) and (orientation:portrait) {

    #pension .linkKill,
    #galerie .linkKill {
        top: 2vw;
        right: 3vw;
        border: none;
        font-size: 6vw;
    }
}

#pension .linkKill:hover,
#galerie .linkKill:hover {
    border: 1px solid #fefefe;
    color: #fefefe;
}






/* Galerie */

#galerie button {
    border: none;
    padding: 0;
    /* width: 24%; */
    width: calc(calc(100% / 3) - 4px);
    aspect-ratio: 1 / 1;
    height: auto;
    padding-block: 2px;
    padding-inline: 2px;
    background: transparent;
    /* cursor: pointer; */
    cursor: initial;
    pointer-events: none;
}

#galerie button.dh {
    aspect-ratio: 1 / 2;
}

#galerie img {
    /* display: none; */
    /* width: 100%; */
    object-fit: cover !important;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    transition: 0.3s;
}








/* Email udn Telefon Knopf */


.telefon,
.email {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    transition: 0.3s;
}

.telefon {
    top: 3em;
}

@media (max-width: 1024px) and (orientation:landscape) {
    .telefon {
        top: 5em;
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .email {
        top: 0em;
    }

    .telefon {
        top: 5em;
    }
}

@media (max-width: 768px) and (orientation:portrait) {
    .telefon {
        top: 5em;
    }
}

@media (max-width: 760px) and (orientation:portrait) {

    .telefon,
    .email {
        position: absolute;
        width: 100%;
        /*        bottom: 56vw;*/
        bottom: initial;
        display: flex;
        justify-content: flex-end;
        transition: 0.3s;
    }

    .telefon {
        top: 5em;
    }

    .email {
        top: 1em;
    }
}


.telefon a,
.email a {
    font-size: 1.5em;
    text-decoration: none;
    padding: 0.25em 0.75em;
    border-radius: 1em;
    background: #FCC900;
    color: #141515;
    /*    box-shadow: inset 0 0 4px -1px #fefefe;*/
    margin: 1em 1em 0 0;
}

.telefon a:hover,
.email a:hover {
    color: #FCC900 !important;
    background: #141515;
}


@media (max-width: 1024px) and (orientation:landscape) {

    .telefon a,
    .email a {
        font-size: 2em;
    }
}

@media (max-width: 1024px) and (orientation:portrait) {

    .telefon a,
    .email a {
        font-size: 2em;
    }
}

.telefon a:hover,
.email a:hover {
    color: #ff000080;
    /*    box-shadow: inset 0 0 4px -1px #ff000080;*/
    transition: 0.3s;
}




@media (max-width: 768px) and (orientation:portrait) {

    .telefon a,
    .email a {
        font-size: 2em;
    }
}

@media (max-width: 760px) and (orientation:portrait) {

    .telefon a,
    .email a {
        font-size: 4.5vw;
        text-decoration: none;
        /* background: red; */
        margin: 0 7vw 0 0;
        padding: 0.25em 0.5em;
        border-radius: 1em;
        backdrop-filter: blur(1px);
        box-shadow: inset 0 0 4px -1px;
    }

    /*
    .container:has(#pension:target) .telefon {
        bottom: inherit;
        top: 2vw;
    }
    */
}







/* RESERVIERUNGSFORMULAR */

/* Styling für das Reservierungs-Overlay */
#reservierung {
    display: none;
    /* Versteckt, bis Hash aufgerufen wird */
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(34, 34, 34, 0.95);
    /* Dunkles Overlay */
    z-index: 100;
    overflow-y: auto;
}

#reservierung:target {
    display: block;
    /* Zeigt das Formular, wenn #reservierung in der URL steht */
}

.content-box {
    max-width: 800px;
    margin: 5vh auto;
    padding: 30px;
    background: #1a1a1a;
    border: 1px solid #444;
    position: relative;
    box-sizing: border-box;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: #fefefe;
    font-size: 1.5rem;
    cursor: pointer;
}

#bookingForm .form-group {
    margin-bottom: 20px;
}

#bookingForm .row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

#bookingForm .half {
    flex: 1;
    min-width: 250px;
}

#bookingForm .third {
    flex: 1;
    min-width: 150px;
}

#bookingForm label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

#bookingForm input[type="text"],
#bookingForm input[type="email"],
#bookingForm input[type="date"],
#bookingForm input[type="number"],
#bookingForm textarea {
    width: 100%;
    padding: 10px;
    background: #333;
    border: 1px solid #555;
    color: #fefefe;
    box-sizing: border-box;
}

/* Kalender-Icon bei dunklem Theme weiß machen */
#bookingForm input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

#bookingForm .checkboxes label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

#bookingForm input[type="checkbox"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

#bookingForm .submit-btn {
    background: #ff000080;
    /* Passend zu deinem Scrollbar-Thumb */
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.1rem;
    cursor: pointer;
    width: 100%;
    transition: background 0.3s;
}

#bookingForm .submit-btn:hover {
    background: #ff0000;
}

/* Formular Styling für die Reservierungsseite */
#reservierung .row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

#reservierung .col {
    flex: 1;
    min-width: 200px;
}

#reservierung .full {
    width: 100%;
}

#reservierung label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: #fefefe;
}

.form-input {
    width: 100%;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    /* Halbtransparent dunkel */
    border: 1px solid #555;
    color: #fff;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: #ff000080;
    /* Roter Akzent wie bei deiner Scrollbar */
}

/* Kalender-Icon invertieren, damit es auf dunklem Grund sichtbar ist */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

.checkboxes label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    color: #ccc;
}

.checkboxes a {
    color: #ff000080;
    text-decoration: underline;
}

.submit-btn {
    background: #ff000080;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.1rem;
    cursor: pointer;
    width: 100%;
    margin-top: 15px;
    transition: background 0.3s;
}

.submit-btn:hover {
    background: #ff0000;
}