@font-face {
    font-family: "DINPro";
    src: url("https://roger-schnyder.com/font/DINPro.woff");
}

@media (prefers-color-scheme: dark) {
body {color:gainsboro; background-color:#383838;}
}
@media (prefers-color-scheme: light) {
body {color:black; background-color:lightgray;}
}

body {
    text-wrap:wrap;
    line-break:strict;
    -webkit-user-select: none;
    font-family: "DINPro";
    font-size: clamp(12.5pt, 1vmax, 1vw);
    line-height: 1.3;
}

#yes {
    padding:5vw;
    width:60vw;
    min-width:350px;
    padding-top:clamp(75px,5vmax,5vmax);
    padding-bottom:5vw;
    display:block;
}

a {
    display:inline;
}

p{
	display:inline;
	padding-right:2vw;
}

r:hover {
    cursor:pointer;
}

@media only screen and (max-width: 900px) {
    .bignav {display:none;}
    .topnav {display:inline-block;float:left;}
    .sidenav {display:none;}
    
}
@media only screen and (min-width: 901px) {
    .bignav {display:inline-block;float:left;}
    .topnav {display:none;}
    .sidenav {display:flex;}
}

#logo {
    padding-left:4vw;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  font-size: clamp(12.5pt, 1vw, 1vw);
  line-height:clamp(12.5pt, 2vw, 2vmax);
  padding: 1vw;
  padding-left:0;
  float: left;
}

/* Style the hamburger menu */
.topnav a.icon {
  float: left;
  position: absolute;
  left: .5vw;
  top: .5vw;
}

.sub {
    margin-left: 2vmax;
}

.topnav a.icon:hover {
    cursor:pointer;
}

.sidenav {
	text-align:right;
	position:fixed;
	bottom:3vh;
	right:1.5vw;
	.sidelmnt {
		text-align:right;
		flex-direction:row-reverse;
		width:auto;
		display:flex;
		line-height:1.1;
		padding-bottom:0.5vh;
	}
	margin-left:auto;
	margin-right:0;
}

.bild {
    object-fit: cover;
    display:inline;
    align-items:start;
}

.bild:hover {
    cursor:pointer;
}

.grid {
    width: 80vw;
    height: auto;
    display: flex;
    flex-flow:row wrap;
    padding-bottom:15vh;
}

.caption {
    height:0;
    padding-top:.5vmax;
    padding-bottom:1vmax;
    display:inline-flex;
    visibility:collapse;
    width:80vw;
}

.column {
    display:flex;
    flex-direction:column;
}

.row {
    display:flex;
    flex-flow:row wrap;
}

.one {
    width:60vw;
}

.two {
    width:35vw;
    padding-right:3vw;
}

.bild.two {
    height:35vw;
}

.three {
    width:25vw;
    padding-right:1.6vw;
}

.bild.three {
    height:25vw;
}

.four {
    width:18vw;
    padding-right:2vw;
}

.bild.four {
    height:18vw;
}

.five {
    width: 15vw;
    padding-right: 1vw;
}

.bild.five {
    height: 15vw;
}

.jahre {
    margin-bottom:1vmax;
}

.foto {
    object-fit:fill;
    height:auto;
    padding-bottom: 3vh;
}

.objekt {
    object-fit:fill;
    height:auto;
    padding-bottom: 3vh;
}

.grafie {
    padding-bottom:20vh;
}

[id^=bild] {
    display:none;
}

[id^=bild]:checked + label > img {
    width:80vw;
    height:auto;
    object-fit:fill;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow:scroll;
}

[id^=bild]:checked ~ .caption {
    visibility:visible;
    height:auto;
    width:80vw;
}

.container {
  margin: 0 auto;
  position: relative;
}
.slideshow {
	position: relative;
	width: 100%;
	height: 250%;
	&:after {
		content: '';
		display: block;
		padding-bottom: calc((100% / 6) * 4);
	}
	a {
		position: relative;
		text-decoration: none;
		&:after {
			border-color: black black transparent transparent;
			border-style: solid;
			border-width: 2px;
			display: block;
			height: 10px;
			position: absolute;
			top: calc(50% - 5px);
			width: 10px;
		}
		&:first-child:after {
			content: '';
			left: 10px;
			transform: rotate(-135deg);
		}
		&:nth-child(2):after {
			content: '';
			right: 10px;
			transform: rotate(45deg);
		}
	}
	.slide {
		box-sizing: border-box;
		display: none;
		height: auto;
		position: absolute;
		width: 100%;
		&:first-child,
		&:target {
			display: flex;
		}
		a {
			display: flex;
			height: 100%;
			position: absolute;
			width: 50%;
			&:nth-child(2) {
				left: 50%;
			}
		}
	}
}