/*

   ##### Screen ######

   @author Konrad Brynda
   @created 2023-12-25
   @modified 2023-12-25
   @iteration 001

*/

* {box-sizing: border-box}

@font-face {font-family: 'Aileron'; src: url('../fonts/Aileron-Regular-webfont.woff'); font-weight: normal; font-style: normal}
@font-face {font-family: 'Aileron'; src: url('../fonts/Aileron-Black-webfont.woff'); font-weight: 900; font-style: normal}
@font-face {font-family: 'Aileron'; src: url('../fonts/Aileron-Italic-webfont.woff'); font-weight: normal; font-style: italic}
@font-face {font-family: 'Aileron'; src: url('../fonts/Aileron-Thin-webfont.woff'); font-weight: 200; font-style: normal}
@font-face {font-family: 'Aileron'; src: url('../fonts/Aileron-ThinItalic-webfont.woff'); font-weight: 200; font-style: italic}


html {}
body {margin: 0; padding: 0; overflow-x: hidden; font-family: 'Aileron', sans-serif}

hcms-page {display: unset}
hcms-part {display: unset}
hcms-field {display: unset}
hcms-hold {display: none}

h1 {}
a {text-decoration: none}
a:hover {text-decoration: underline}
li {margin: 6px 0}
ul ul {list-style-type: '—  '}
blockquote {font-family: Times, serif; font-size: 1.8em; line-height: 1em; font-style: italic}
blockquote::before {display: inline; font-size: 2.4em; margin-right: .1em; content: '«'}
blockquote::after {display: inline; font-size: 2.4em; margin-left: .1em; content: '»'}

img {display: block; width: 100%}
div.youtube {width: 100%; position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%}
div.youtube iframe, div.youtube object, div.youtube embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%}

	
/* --- generic --- */

.padded {padding: 7px}
.smaller img {max-height: 75vh; width: auto !important}

/* page */

#page {}

#frontdrop {position: relative; width: 100vw; height: 100vh; display: flex; flex-direction: column}
#backdrop {position: fixed; width: 100vw; height: 100vh; display: flex; flex-direction: row; z-index: -100; top: 0}

#page-header {width: 100vw; position: fixed}
#page-body {!width: 100vw; !overflow-x: hidden; !overflow-y: auto}

.fold.folded {display: none}

.page-aside {}
.page-aside .filled {border-bottom: 1px solid}

.page-aside {flex: 0 0 40vw; margin: 0; padding: 0}
.page-aside [name='description'] {display: block; padding: 5px 15px}

.page-main {flex: 1 1; margin: 0; padding: 0; display: flex; flex-direction: column; border-left: 1px solid}
.page-main > * {!z-index: 100}
.page-main .filled {border-bottom: 1px solid}

.page-part {display: flex; margin: 0; padding: 0}

.page-contents {padding: 0 15px}

@media (max-width: 600px) {
	#page {position: relative}
	#page-body {}
	.page-aside {flex: 0 0 100vw; margin: 0; padding: 0}
	.page-main {flex: 0 0 100vw; margin: 0; padding: 0; border-left: none}
	.page-main:not(.show) {display: none}
}

@media (min-width: 600px) {
	#slide-aside, #slide-main {}
	i.slide-left,
	i.slide-right {display: none}
}


/* --- parts --- */

[name='site-title'] {font-size: 100pt; line-height: 70pt; font-weight: 900}
[name='site-motto'] {font-size: 15pt; line-height: normal; display: block; margin: 10px}
[name='page-title'] {font-size: 24pt; display: block; margin: 10px}

#page-title h1 {margin: 0}

.clickable {cursor: pointer}
.icons {font-size: 18px; height: 35px}
.menu {}
.impressum {!display: none}
.filler {flex-grow: 1}


div.split + div.split,
picture + div.split,
div.split + picture {margin-top: 1px}

@media (min-width: 1200px) {

	div.split {display: flex}
	div.split > * {flex: 1 1}
	div.split .split-left {}
	div.split .split-right {}

}


/* --- generic page --- */

p {margin: 15px}


/* --- blog --- */

[name='blog-posts'] .page-part .page-aside,
[name='blog-posts'] .page-part .page-main {border-bottom: 1px solid}

.blog-post .post-meta {margin: 15px}

.blog-post h2 {font-size: 1.80em; margin: 0 0 12px; cursor: pointer}
.blog-post h4 {font-size: 1.20em; margin: 15px 15px 21px}
.blog-post h5 {font-size: 1.05em; margin: 15px}
.blog-post h6 {font-size: 0.90em; margin: 15px}
.blog-post p {font-size: 12pt; line-height: 1.2; font-weight: 300}
.blog-post li {font-size: 12pt; line-height: 1.2; font-weight: 300}
.blog-post span.meta-line {display: block; font-weight: 300}
.blog-post span.meta-line hcms-field {font-weight: 400}
.blog-post .caption {display: block; margin: 15px; color: #aaa; !font-style: italic; font-size: 9pt; font-weight: 200}
.blog-post [name='subtitle'] {display: inline-block; margin-bottom: 6px}
.blog-post [name='author'],
.blog-post [name='date'] {}
.blog-post [name='video'] {display: block; width: 100%}
.blog-post .page-main [name='abstract'] {}
.blog-post .page-main [name='abstract'] p {margin: 30px; font-size: 15pt; line-height: 1.35; font-weight: 300}
.blog-post .page-aside [name='abstract'] {display: block; margin-top: 6px; font-size: 1em; line-height: 1.2}
.blog-post [name='text'] {display: block}
.blog-post [name='text'] picture {display: block; width: calc(100% + 30px)}
.blog-post [name='text'] picture + picture img {margin-top: 1px}

@media (min-width: 1200px) {

	.blog-post [name='text'] .split > picture + picture img {margin: 0 0 0 1px}

}

[name='blog-posts'] > :first-child [name='thumbnail'] {display: block; z-index: -100}


/* --- photography --- */

.photography .caption {display: block; margin: 15px; color: #444; !font-style: italic; font-size: 9pt; font-weight: 200}

.photography .post-meta {margin: 15px}
.photography img {display: block}
.photography picture + picture img {margin-top: 1px}