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;
  }
}





#leistungen::-webkit-scrollbar {
  width: 0.5em;
}
@media (max-width: 760px) and (orientation: portrait) {
  #leistungen::-webkit-scrollbar {
    width: 1vw;
  }
}
#leistungen::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 0px;
}
#leistungen::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 0px;
  border: 0px solid transparent;
  cursor: pointer;
}
@supports not selector(::-webkit-scrollbar) {
  #leistungen {
    scrollbar-color: red 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 60s linear infinite;
/*    animation-fill-mode: backwards;*/
    will-change: opacity;
}

.container .hintergrund_1 {
    background-image: url(../images/hintergrund/wiese_d-1920.jpg);
    animation-delay: 0s;
}
.container .hintergrund_2 {
    background-image: url(../images/hintergrund/traktor_d-1920.jpg);
    background-position-y: top;
    animation-delay: 10s;
}

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

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

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

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








@media (max-width: 760px) and (orientation:portrait) {
    .container .hintergrund_1 {
        background-image: url(../images/hintergrund/wiese_h-760.jpg);
    }
    .container .hintergrund_2 {
        background-image: url(../images/hintergrund/traktor_h-760.jpg);
    }
    .container .hintergrund_3 {
        background-image: url(../images/hintergrund/wiese-2_h-760.jpg);
    }
    .container .hintergrund_4 {
        background-image: url(../images/hintergrund/traktor-2_h-760.jpg);
    }
    .container .hintergrund_5 {
        background-image: url(../images/hintergrund/wiese-3_h-760.jpg);
    }
    .container .hintergrund_6 {
        background-image: url(../images/hintergrund/traktor-3_h-760.jpg);
    }
}


@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: 45%;
    
    padding: 2% 2% 2% 2%;
    border-radius: 16px;
    backdrop-filter: blur(1px);
    /* box-shadow: 0 0 15px 0 #444; */
}


@media (max-width: 1024px) and (orientation:portrait) {
    .slogan {
        width: 81%;
    }
    .container:has(#leistungen:target) .slogan {
        width: 50%;
    }
}
@media (max-width: 760px) and (orientation:portrait) {
    .slogan {
        top: 20vw;
    }
}






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








.logo {
    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;
}

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







.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: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .impDat a:nth-of-type(2) {
        order: 3;
        margin: 1vw 10%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .impDat a:nth-of-type(3) {
        order: 2;
    }
    .impDat a:nth-last-of-type(1) {
        order: 4;
        margin: 1vw 10%;
    }
}
.impDat a:hover {
    text-decoration: underline;
}




#impressum,
#datenschutz,
#leistungen {
    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,
    #leistungen {
        width: calc(90% - 6%);
        height: 72vh;
        font-size: 0.8em;
        overflow: scroll;
    }
}
@media (max-width: 760px) and (orientation:portrait) {
    #impressum,
    #datenschutz,
    #leistungen {
        width: calc(90% - 6%);
        font-size: 2.25vw;
    }
}

#impressum *,
#datenschutz *,
#leistungen * {
    color: #333333;
}
#impressum h2,
#datenschutz h2,
#leistungen h2 {
    font-size: 3em;
}
#impressum h3,
#datenschutz h3,
#leistungen h3 {
    margin: 0.25em 0;
    font-size: 1.5em;
}
#impressum p,
#datenschutz p,
#leistungen p {
    font-size: 1.2em;
}

#impressum a,
#datenschutz a,
#leistungen a {
    text-decoration: none;
}
#impressum a:hover,
#datenschutz a:hover,
#leistungen 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,
.container:has(#leistungen:target) #leistungen {
    display: block;
}

/*
.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(#leistungen:target) .slogan svg path:nth-of-type(1) {
    fill: #fefefe;
}
.container:has(#leistungen:target) .slogan svg path:nth-of-type(4),
.container:has(#leistungen:target) .slogan svg path:nth-of-type(5),
.container:has(#leistungen:target) .slogan svg path:nth-of-type(6) {
    fill: transparent;
}

@media (max-width: 760px) and (orientation:portrait) {
    .container:has(#leistungen:target) .slogan {
        display: none;
    }
}

.container:has(#impressum:target) .logo,
.container:has(#datenschutz:target) .logo,
.container:has(#leistungen:target) .logo {
/*    width: 8%;*/
/*    bottom: 2.5%;*/
    width: 17%;
    width: clamp(0px, 30vw, calc(325px + 3vw));
    bottom: 9.5%;
    right: 1%;
    z-index: 1;
    cursor: pointer;
    pointer-events: all;
}

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

@media (max-width: 1024px) and (orientation:portrait) {
    .container:has(#impressum:target) .logo,
    .container:has(#datenschutz:target) .logo,
    .container:has(#leistungen:target) .logo {
/*        bottom: 1.25%;*/
        bottom: 5.5%;
    }
}

@media (max-width: 760px) and (orientation:portrait) {
    .container:has(#impressum:target) .logo,
    .container:has(#datenschutz:target) .logo,
    .container:has(#leistungen:target) .logo {
/*        width: 50vw;*/
/*        bottom: 9%;*/
/*        right: initial;*/
/*        left: 50%;*/
/*        transform: translateX(-50%);*/
        
            width: 78vw;
            right: 6vw;
            bottom: 22vw;
    }
}





.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(#leistungen: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(#leistungen: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(#leistungen: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(#leistungen:target) .logo:hover svg .fil2{
/*    fill:#fefefe;*/
    fill:#dd2a1b;
    transition: 0.3s;
}




#impressum .linkKill,
#datenschutz .linkKill,
#leistungen .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,
#leistungen .linkKill:hover {
    text-decoration: none;
    border: 1px solid #333;
    color: #333;
    transition: 0.3s;
}
















/* Leistungen */

#leistungen {
    background: transparent;
    top: 27%;
    transform: translate(-50%, -25%);
    backdrop-filter: blur(8px);
    padding: 4% 4% 3% 4%;
    margin: 0 1vw;
    max-height: calc(83vh - 4%);
    font-size: 0.8em;
    overflow-y: auto;
}
@media (max-width: 1024px) and (orientation:portrait) {
    #leistungen {
        width: calc(64% - 6%);
        left: 60%;
        top: 22%;
    }
}
@media (max-width: 760px) and (orientation:portrait) {
    #leistungen {
        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%);*/
    }
}

#leistungen h2 {
    color: #fefefe;
    font-size: 6vw;
    font-weight: 100;
    line-height: 1;
    margin: 0 0 0.5em 0;
    filter: drop-shadow(1px 1px 2px black);
}
@media (max-width: 1024px) and (orientation:portrait) {
    #leistungen h2 {
        font-size: 11vw;
    }
}
@media (max-width: 760px) and (orientation:portrait) {
    #leistungen h2 {
/*        margin: 2vw 0 8vw 24vw;*/
        font-size: 9vw;
    }
}

#leistungen p {
    margin: 0 0 0.25em 0;
    color: #fefefe;
    white-space: nowrap;
    font-size: clamp(0px, 3.5vw, 60px);
    filter: drop-shadow(1px 1px 2px black);
}
@media (max-width: 1024px) and (orientation:portrait) {
    #leistungen p {
        font-size: 4.5vw;
    }
}
@media (max-width: 760px) and (orientation:portrait) {
    #leistungen p {
        font-size: 6.5vw;
    }
}

#leistungen .linkKill {
    border: 1px solid #fefefeaa;
    color: #fefefeaa;
}
@media (max-width: 760px) and (orientation:portrait) {
    #leistungen .linkKill {
        top: 2vw;
        right: 3vw;
        border: none;
        font-size: 6vw;
    }
}
#leistungen .linkKill:hover {
    border: 1px solid #fefefe;
    color: #fefefe;
}










.telefon {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    transition: 0.3s;
}
.telefon a {
    font-size: 3em;
    text-decoration: none;
    padding: 0.25em 0.5em;
    border-radius: 1em;
    backdrop-filter: blur(1px);
    box-shadow: inset 0 0 4px -1px;
    margin: 1em 1em 0 0;
}






@media (max-width: 760px) and (orientation:portrait) {
    .telefon {
        position: absolute;
        width: 100%;
        bottom: 56vw;
        display: flex;
        justify-content: center;
        transition: 0.3s;
    }
    .telefon a {
        font-size: 8vw;
        text-decoration: none;
        /* background: red; */
        margin: 0;
        padding: 0.25em 0.5em;
        border-radius: 1em;
        backdrop-filter: blur(1px);
        box-shadow: inset 0 0 4px -1px;
    }
    /*
    .container:has(#leistungen:target) .telefon {
        bottom: inherit;
        top: 2vw;
    }
    */
}