html {
	scroll-behavior: smooth;
}

main>nav {
	display: contents;
}

@keyframes imgfade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

a[href^="tel:"] {
	white-space: nowrap;
}

main>header:not(:hover)>a + a{
	opacity: 0;
}

main>nav>a {
	display: inline-block;
	position: relative;
	overflow: hidden;
	transition: color 0.1s ease 0s;
}

main>header>a:before, main>nav>a:before {
	content: "";
	background: var(--foreground);
	width: 0;
	height: 100%;
	position: absolute;
	left: 100%;
	top: 0;
	z-index: -1;
	transition: left 0.1s ease, width 0.1s ease 0.1s;
}

main>nav>a:hover {
	transition: color 0.1s ease 0.1s;
	color: var(--background);
}
main>header>a:hover:before,
main>nav>a:hover:before {
	left: 0;
	width: 100%;
}

main img {
	opacity: 0;
}

main img.loaded {
	animation: imgfade 0.5s ease 0s both;
}

main>header {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
}

@media(min-width: 70em) {
	main>header {
		grid-column: 2 / -1;
	}
}

#userlabel {
	text-decoration: none;
	padding: 0.5em;
	font-size: 0.5em;
	position: fixed;
	right: 0;
	top: 50vh;
	transform: rotate(-90deg) translateY(3em);
}

main>nav+* {
	grid-column: 1;
}

@media(max-width: 50em) {
	hr {
		background: var(--foreground);
	}

	body.travelblog hr, body.photojournalist hr {
		background-color: currentColor!important;
	}

	main>hr {
		width: 2px;
		margin: 4em 50%;
	}

	main>hr+hr {
		display: none;
	}

	.travelblog a>img:first-of-type, .photojournalist a>img:first-of-type {
		margin-top: 1rem;
	}

	header input[type=checkbox]:checked ~ a {
		align-items: flex-end;
		flex-direction: row;
	}

	header input[type=checkbox]:checked ~ a>span {
		display: flex;
		align-self: flex-end;
	}

	header input[type=checkbox]:checked ~ a>span:last-child {
		align-self: start;
	}

	header:hover a>span {
		display: inline-block!important;
	}

	header:hover a {
		dddisplay: block;
		pppposition: relative;
	}

	body:not(.photojournalist):not(.travelblog) {
		background-position: 80% 2em;
	}

	h2 {
		overflow: hidden;
	}
}

main>header>a {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	transition: max-height 0.3s ease, opacity 0.3s ease, color 0.3s ease;
	min-height: 5em;
}
header>a>h1{
   font-size: inherit;
   font-weight: inherit;
}


main>h2>del{
  white-space: unset;
}
header,nav>a {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

blockquote>p, #edit, h1, #search input, h2, h6, a.active, header, fieldset>legend {
	font-size: 2em;
	line-height: 1.1;
}


body:not(.photojournalist):not(.travelblog) header>a:not(:hover):first-child{
	color: inherit;
}
main>header>a{
   align-items: center;
}

.timestamp {
	text-orientation: sideways;
	writing-mode: vertical-lr;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

blockquote>p:nth-child(2), figcaption, .timestamp {
	font-size: 0.8rem;
	font-family: gtcinetypemono;
	line-height: 1.6;
}

blockquote>p:first-child, a.active, input, h2, .patrickrohr {
	font-weight: 200;
}

blockquote>p:first-child {
	font-style: italic;
	text-indent: -0.5em;
}

blockquote>p:first-child:before {
	content: open-quote;
}

blockquote>p:first-child:after {
	content: close-quote;
}

body.debug {
	counter-reset: section;
}

body.debug main>*:not(img), .debug header>* {
	background-image: url(frame.svg);
	background-repeat: no-repeat;
	background-size: calc(100% - 2px) calc(100% - 2px);
	background-position: 1px 1px;
	position: relative;
}

body.debug main>*:before {
	font-size: 1rem;
	counter-increment: section;
	content: counter(section);
	padding: 1em;
	position: absolute;
	top: 0;
	right: 0;
}

* {
	padding: 0;
	margin: 0;
}

nav+h2>strong {
	display: inline-block;
}

main>a:hover>blockquote, main>a:hover>h2, main>a:hover>p, strong, /*main>nav>a:hover*/
a.active {
	background-color: var(--foreground);
	color: var(--background);
	border: none;
	outline: 0;
}

main>figure {
	background-color: var(--background);
	display: flex;
	flex-direction: column;
}

/*
main>figure:after {
	content: "";
	flex-grow: 1;
	background-color: var(--highlight);
	width: 100%;
	display: flex;
}
*/
main>ol {
	list-style-position: inside;
	padding: 1rem;
	display: contents;
}

/*
h2,p {
	overflow: hidden;
	padding-bottom: 2rem!important;
}
*/
main>a:before {
	content: "";
	background-color: var(--highlight);
	flex-grow: 1;
}

main>a:hover:before {
	background-color: var(--foreground);
}

div.embed {
	padding: 1rem;
}

#maps, main>div.embed,main>div.film, main>p, main>ol, main>ol>li, main>h2, main>figure, main>video, main>a, a.active, main>blockquote, main>a.bildlink {
	grid-column-end: span 2;
}

form input {
	font-size: inherit;
	border: none;
}

::-moz-selection {
	background: var(--foreground);
	color: var(--background);
}

::selection {
	background: var(--foreground);
	color: var(--background);
}

u {
	color: var(--highlight);
	text-decoration: none;
}

img {
	border: none;
	max-width: 100%;
	width: 100%;
	vertical-align: top;
}

body:not(.photojournalist):not(.travelblog) figure img.js-lazy-image--handled, body:not(.photojournalist) img.js-lazy-image--handled,video {
	max-width: 100%;
	width: unset;
}

#qrcode img,#qrcode canvas, video, figure.cover img {
	width: 100%;
}

main>a,nav>a,#edit, u, header>a {
	text-decoration: none;
}

body:not(.photojournalist):not(.travelblog) {
	background-color: var(--background);
	color: var(--foreground);
}

h2, h3, h4, h5, h6, p, ol>li {
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

figcaption {
	max-width: 100ch;
}

header>a, main>ol>li, #maps ~ a, p,nav>a,h2,#edit,.timestamp,#maps,figcaption {
	padding: 1rem;
}

a {
	color: inherit;
}

a:focus {
	outline: 0;
}

header>a:hover {
	color: var(--background);
}

#last {
	background-color: var(--highlight);
	grid-column: span 3 / -1;
}

nav>a.active {
	z-index: 3;
	display: block;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

main>hr {
	grid-column-end: unset;
	grid-column: 1 / 3;
	height: 60vh;
	max-height: 30em;
	border: none;
}

main>hr+hr {
	grid-column: 3 / -1!important;
	position: relative;
}

main>hr+hr:after {
	position: absolute;
	left: 0;
	top: 4em;
	content: "";
	display: inline-content;
	height: calc(100% - 8em);
	grid-column: 3 / -2;
	border-left: 2px solid var(--foreground);
}

#maps {
	grid-column: 1 / -1;
	padding-top: 4em;
	position: relative;
	display: block;
}

#maps~a {
	display: inline-block;
	grid-column-end: unset;
	position: relative;
	color: var(--background);
}

#maps~a:before {
	display: none;
}

#maps:after {
	content: "";
	background-color: var(--foreground);
	position: absolute;
	left: 0;
	top: 100%;
	height: 10em;
	width: 100%;
	animation: none;
}

main>a:last-child {
	grid-column-end: -1;
}

#bar {
	display: block;
	height: 0em;
	background-color: var(--foreground);
	position: relative;
	margin-top: -7em;
	z-index: 1;
}

@media(min-width: 50em) {
	main>header>a {
		display: flex;
		flex-wrap: wrap;
		flex-grow: 1;
	}

	main>header {
		min-height: 30vh;
	}

	#bar {
		margin-top: -5em;
		height: 7em;
	}

	#maps~a {
		z-index: 10;
		background-color: var(--foreground);
		color: var(--background);
	}

	main>a {
		background-color: var(--background);
		display: flex;
		flex-direction: column;
	}

	#maps ~ a {
		min-height: 5rem;
	}

	body.travelblog main>figure:not(.cover), body.photojournalist main>figure:not(.cover) {
		padding: 1rem;
	}

	header>label {
		flex-grow: 1;
		cursor: pointer;
		padding-top: 2rem;
		padding: 1rem;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	body:not(.photojournalist):not(.travelblog) main>figure:not(:hover) img, body:not(.photojournalist):not(.travelblog) main>a:not(:hover) img, body:not(.photojournalist) main>video:not(.cover), body:not(.photojournalist) main>a:not(:hover) video {
		mix-blend-mode: overlay;
	}

	body {
		font-size: 1.6em;
	}

	main>nav>a {
		min-height: 6rem;
		display: flex;
	}

	main>a, figure {
		float: left;
		width: 50%;
		min-height: 7rem;
		transition: background-color 0.1s ease,color 0.1s ease;
	}

	@supports (display: grid) {
		main {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
		}

		main>a, figure {
			float: unset;
			width: unset;
			min-height: unset;
		}
	}

	#content,main>figure.cover, main>video.cover,form, #search, #edit {
		grid-column: 1 / -1!important;
	}
}

@media(min-width: 80em) {
	main>nav~*:not(hr):nth-child(2n+2) {
		grid-column-end: span 3;
	}
}

/*
@media(min-width: 90em) {
	main>a:nth-child(2n+3) {
		grid-column-end: span 4;
	}
}
*/
#search {
	overflow: hidden;
	display: flex;
	transition: background-color 0.4s ease;
	background-color: var(--foreground);
}

#search:focus-within {
	background-color: var(--highlight);
}

#search input {
	background-color: inherit;
	flex-grow: 1;
	-webkit-appearance: none;
	font-family: inherit;
	padding: 16vw 1rem;
	color: var(--highlight);
}

#search input:focus {
	outline: 0;
	color: var(--foreground);
}

::-webkit-input-placeholder {
	color: var(--highlight);
}

::-moz-placeholder {
	color: var(--highlight);
}

:-ms-input-placeholder {
	color: var(--highlight);
}

:-moz-placeholder {
	color: var(--highlight);
}

figure>figcaption>a:after {
	content: "→";
}

#maps~a:after {
	content: "→";
}

#maps~a[href^="#"]:after {
	content: "↑";
}

@media screen and (prefers-reduced-motion) {
	#search, header>a, header span:after, nav>a:after, span.dot, #maps:after {
		animation: unset;
		transition: unset;
	}
}

@media print {
	body,strong,u {
		--foreground: black; --background: unset; background-color: unset!important;
		color: black;
	}

	li, p, h2,figure,img,video {
		page-break-inside: avoid;
	}
}

#qrcode {
	background: #FFF;
	grid-column: 1 / -1;
	height: 100vh;
	width: 100%;
	overflow: hidden;
}

#qrcode img {
	opacity: 1;
	padding: 2em;
	width: calc(100% - 4em);
	height: calc(100% - 4em);
	object-fit: contain;
}

body.offline nav a{
	text-decoration: line-through;
	pointer-events: none;
}
body.offline form#search{
   display: none;
}

#messageBar{
	color: var(--foreground);
	background-color: var(--background);
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 99999;
	max-height: 0;
	overflow: hidden;
}

#messageBar p{
	padding: 1rem;
	font-size: 2em;
	min-height: 6rem;
	font-weight: 200;
}

#messageBar.show{
	animation: dropMessage 5s ease 0s both;
}

@keyframes dropMessage {
	0%,100% {
		max-height: 0;
	}
	20%,80% {
		max-height: 7em;
	}
}