/*
-----------------------------------------------
		www.christinaschmid.de
----------------------------------------------- */


/*		W E R T E
----------------------------------------------- */

:root {
		--text: #111;
		--grund: #fff;
		--grau: #999;
		--schrift: "NeuzeitSLTStd-Book", "Helvetica Neue", Helvetica, Arial, sans-serif;
		--groesse: 15px;
		--zeile: 20px;
		--sperrung: 0.035em;
		--wortabstand: -0.05em;
		--klein: 11px;
		--zeile-klein: calc(var(--klein) * 20 / 15);
		--sperrung-klein: 0.06em;
}

@media screen and (min-width: 1400px) {
	:root {
		--groesse: 17px;
		--zeile: 25px;
		--klein: 13px;
		--zeile-klein: calc(var(--klein) * 25 / 17);
		--sperrung-klein: 0.04em;
	}
}


/*		R E S E T
----------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, menu, nav, section, summary,
time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
}

html {
		height: 100%;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		font-variant-ligatures: none;
}

blockquote, q {
		quotes: none;
}

table {
		border-collapse: collapse;
		border-spacing: 0;
}

input, select {
		vertical-align: middle;
}

nav ul, footer .fussnav {
		list-style: none;
}

:focus {
		outline: none;
}

:focus-visible {
		outline: 1px dotted currentColor;
		outline-offset: 2px;
}


/*		S C H R I F T
----------------------------------------------- */

/**
 * @license
 * MyFonts Webfont Build ID 3416399, 2017-07-04T15:04:53-0400
 *
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are
 * explicitly restricted from using the Licensed Webfonts(s).
 *
 * You may obtain a valid license at the URLs below.
 *
 * Webfont: NeuzeitSLTStd-Book by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/neuzeit-s/neuzeits-book/
 * Copyright: Copyright © 1990, 2001, 2002 Adobe Systems Incorporated.  All Rights Reserved. © 1981, 2001, 2002 Heidelberger Druckmaschinen AG. All rights reserved.
 * Licensed pageviews: 750,000
 *
 * License: https://www.myfonts.com/viewlicense?type=web&buildid=3416399
 *
 * © 2017 MyFonts Inc
*/

@font-face {
		font-family: "NeuzeitSLTStd-Book";
		src: url("webfonts/34214F_0_0.woff2") format("woff2"), url("webfonts/34214F_0_0.woff") format("woff");
		font-display: swap;
}


/*		G R U N D L A G E N
----------------------------------------------- */

body {
		color: var(--text);
		background: var(--grund);
		font-family: var(--schrift);
		font-size: var(--groesse);
		line-height: var(--zeile);
		letter-spacing: var(--sperrung);
		word-spacing: var(--wortabstand);
		text-align: center;
}

a:link, a:visited {
		color: var(--text);
		text-decoration: none;
}

a:hover, a:active {
		color: var(--grau);
}

h1, h2 {
		font-weight: normal;
}

header h1 a {
		display: inline-block;
		vertical-align: top;
}

#description > p,
.blogcontent p {
		-webkit-hyphens: manual;
		hyphens: manual;
		text-wrap: pretty;
}

.desktop {
		display: none;
}


/*		K O P F
----------------------------------------------- */

#dots {
		display: none;
}

#wrapper {
		margin: calc(var(--zeile) - 5px) 0 0 var(--zeile);
		text-align: left;
}

#wrapper::after {
		content: "";
		display: block;
		clear: both;
}

nav {
		display: inline-block;
		vertical-align: top;
		position: relative;
		margin: var(--zeile) 40px 0 -15px;
}

nav li {
		display: block;
}

nav li::before {
		content: "•";
		display: inline-block;
		position: relative;
		top: 2px;
		width: 15px;
		font-size: 17px;
		line-height: 0;
		opacity: 0;
}

nav li.active::before {
		opacity: 1;
}


/*		P R O J E K T
----------------------------------------------- */

#project {
		margin-top: calc(var(--zeile) * 2);
		margin-right: var(--zeile);
}

#project h1 {
		padding-bottom: var(--zeile);
}

#projimages figure {
		margin-bottom: var(--zeile);
}

#projimages img {
		position: relative;
		width: 100%;
		height: auto;
		margin-bottom: -6px;
}

.embedblock {
		margin-top: var(--zeile);
		margin-bottom: 15px;
}

.embedblock iframe {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
}

#description p {
		margin-bottom: var(--zeile);
}

#description a, #fineprint a, .blogcontent a, .datenschutz a {
		border-bottom: 1px dotted var(--grau);
}

.blogcontent a[data-bildansicht] {
		border-bottom: none;
}

#fineprint, .datenschutz {
		font-size: var(--klein);
		line-height: var(--zeile-klein);
		letter-spacing: var(--sperrung-klein);
}

#fineprint {
		margin-top: calc(var(--zeile) * 2);
}

.datenschutz {
		display: block;
}

#more, #more_nav {
		margin-top: calc(var(--zeile) * 2);
}

#more::after {
		content: "";
		display: block;
		clear: both;
}

#more_nav {
		display: flow-root;
		margin-right: 20px;
}

#more .grid {
		display: flex;
		flex-wrap: wrap;
}

#more div a {
		position: relative;
		display: block;
		float: left;
		width: calc(50% - var(--zeile));
		margin: 0 var(--zeile) var(--zeile) 0;
		overflow-x: hidden;
		white-space: nowrap;
}

#more figure img {
		position: relative;
		width: 100%;
		height: auto;
		margin-bottom: -1px;
}

#more div a::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 10;
		width: 25px;
		height: 45px;
		background: linear-gradient(to right, rgb(255 255 255 / 0) 18%, rgb(255 255 255 / 0.42) 50%, rgb(255 255 255 / 0.87) 80%, var(--grund));
		pointer-events: none;
}

.pfeil-links, .pfeil-rechts, .arr {
		display: inline-block;
		width: 1.53em;
		height: 0.852em;
		vertical-align: -0.088em;
		background: currentColor;
		-webkit-mask: var(--zeichen) no-repeat 0 0 / 100% 100%;
		mask: var(--zeichen) no-repeat 0 0 / 100% 100%;
}

.pfeil-links { --zeichen: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -1563 3133 1744%22%3E%3Cpath transform=%22scale(1 -1)%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%22160%22 d=%22M3109 698.5H260M940 1466 172.5 698.5 940-69%22/%3E%3C/svg%3E"); }
.pfeil-rechts { --zeichen: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -1563 3133 1744%22%3E%3Cpath transform=%22scale(1 -1)%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%22160%22 d=%22M27 694.5H2880M2195.5 1462.5 2963.5 694.5 2195.5-73.5%22/%3E%3C/svg%3E"); }
.arr { width: 0.68em; }
.arr.auf { --zeichen: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -1563 1392 1744%22%3E%3Cpath transform=%22scale(1 -1)%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%22160%22 d=%22M698.5 4V1340M63.5 790.5 698.5 1425.5 1333.5 790.5%22/%3E%3C/svg%3E"); }
.arr.ab { --zeichen: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 -1563 1392 1744%22%3E%3Cpath transform=%22scale(1 -1)%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%22160%22 d=%22M690 1434V110M55.5 647.5 690 13 1325 647.5%22/%3E%3C/svg%3E"); }

.prev {
		float: left;
}

.next {
		float: right;
}


/*		F U S S
----------------------------------------------- */

footer {
		position: relative;
		margin: calc(var(--zeile) * 2) 0 -20px;
}

footer dl, footer .fussnav {
		margin-bottom: var(--zeile);
}

footer dl:nth-child(2), footer .fussnav {
		display: inline-block;
		vertical-align: top;
		margin-right: 30px;
}


/*		A R C H I V
----------------------------------------------- */

#index {
		margin-top: calc(var(--zeile) * 2);
		margin-right: var(--zeile);
		padding-bottom: var(--zeile);
}

#index table {
		width: 100%;
}

#index thead span {
		font-size: 16px;
		line-height: 0;
}

#index th {
		padding-bottom: var(--zeile);
		font-weight: normal;
}

#index th button {
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		letter-spacing: inherit;
		text-align: inherit;
		cursor: pointer;
}

#index th button:hover {
		color: var(--grau);
}

#index td a:link, #index td a:visited {
		color: inherit;
}

#index tr.Archiv {
		color: var(--grau);
}

#index tr.open:hover {
		color: var(--grau);
		cursor: pointer;
}

.ipr {
		width: 80%;
}

.iku, .ime, .ior {
		display: none;
}

.ija {
		width: 20%;
}

.ibu {
		display: block;
		position: relative;
		top: 2px;
		font-size: 17px;
		line-height: 0;
}

.ibu figure {
		display: none;
		position: absolute;
		top: -2px;
		right: var(--zeile);
		z-index: 20;
		width: 200px;
		height: auto;
}

.ibu figure img {
		width: 100%;
		height: auto;
}


/*		P R O F I L   U N D   K O N T A K T
----------------------------------------------- */

.profilinfos div {
		margin-bottom: calc(var(--zeile) * 3);
}

#mce-EMAIL {
		box-sizing: content-box;
		width: 95%;
		font: inherit;
		border: 1px solid var(--text);
}

#mc-embedded-subscribe {
		box-sizing: content-box;
		padding: 3px 15px;
		font: inherit;
		background: var(--grund);
		border: 2px solid var(--text);
		border-radius: 3px;
		-webkit-appearance: none;
		appearance: none;
}

#mc-embedded-subscribe:hover {
		cursor: pointer;
		color: var(--grund);
		background: var(--text);
}


/*		B L O G
----------------------------------------------- */

#blogerview {
		margin-top: calc(var(--zeile) * 2);
}

.blogentry {
		margin-bottom: 60px;
}

.blogentry h2, .blogentry p {
		margin-bottom: var(--zeile);
}

.blogcontent {
		margin-right: var(--zeile);
}

.blogentry img {
		position: relative;
		width: 100%;
		height: auto;
}

.meta {
		font-size: var(--klein);
		line-height: var(--zeile-klein);
		letter-spacing: var(--sperrung-klein);
}

.meta a:link, .meta a:visited {
		color: var(--grau);
}

.meta a:hover, .meta a:active {
		color: var(--text);
}


/*		A B   6 0 0
----------------------------------------------- */

@media screen and (min-width: 600px) {

header h1 {
		display: inline-block;
		vertical-align: top;
		margin-right: 80px;
}

nav {
		margin-top: 0;
}

#more div a {
		width: calc(33.333333333% - var(--zeile));
}

.ipr {
		width: 30%;
		padding-right: 10px;
}

.iku {
		display: table-cell;
		width: 30%;
		padding-right: 10px;
}

.ime {
		display: table-cell;
		width: 20%;
		padding-right: 10px;
}

.ior {
		width: 12%;
}

.ija {
		width: 13%;
}

.ibu {
		width: 10%;
		text-align: right;
}

.blogentry {
		display: inline-block;
		vertical-align: top;
		width: calc(50% - var(--zeile));
		margin-right: var(--zeile);
}

.profilinfos div {
		display: inline-block;
		vertical-align: top;
		width: calc(50% - var(--zeile));
		font-size: var(--groesse);
		line-height: var(--zeile);
		letter-spacing: var(--sperrung);
}

}


/*		A B   7 0 0
----------------------------------------------- */

@media screen and (min-width: 700px) {

header h1 {
		width: 33.333333%;
		margin-right: 0;
}

nav {
		margin-left: -20px;
}

footer dl, footer .fussnav {
		display: inline-block;
		vertical-align: top;
		position: relative;
		width: 33.33333%;
		margin-right: -3px;
}

footer dl:nth-child(2), footer .fussnav {
		width: inherit;
		margin-right: 20px;
}

.ipr {
		width: calc(33.33333% - 20px);
}

.iku {
		width: 35.75%;
}

#dots {
		display: block;
		position: absolute;
		top: 11px;
		right: 21px;
		width: 100px;
}

#dots a {
		display: block;
}

#dots svg {
		width: 100%;
		height: auto;
		fill: var(--text);
}

#dots a:hover svg {
		opacity: 0.4;
}

#projimages::after {
		content: "";
		display: block;
		clear: both;
		margin-bottom: 40px;
}

#projimages img {
		width: auto;
		margin-bottom: 0;
}

.embedblock {
		margin-bottom: -7px;
}

#projimages .imgblock::after, .embedblock::after {
		content: "";
		display: block;
		clear: both;
}

#projimages .imgblock img {
		float: left;
}

#projimages .imgone img {
		width: 100%;
}

#projimages .imgtwo img {
		width: calc(50% - var(--zeile) / 2);
}

#projimages .imgthree img {
		width: calc(33.333333% - var(--zeile) * 2 / 3);
}

#projimages .imgsix img {
		width: calc(16.666667% - var(--zeile) * 5 / 6);
}

#projimages .imgblock figure + figure img {
		margin-left: var(--zeile);
}

}


/*		A B   8 2 0
----------------------------------------------- */

@media screen and (min-width: 820px) {

.blogentry {
		width: calc(33.333333% - var(--zeile));
}

#description {
		width: calc(66.666666% - 20px);
}

}


/*		A B   1 1 5 0
----------------------------------------------- */

@media screen and (min-width: 1150px) {

header h1 {
		width: 25%;
}

#more div a {
		width: calc(25% - var(--zeile));
}

footer {
		margin-right: var(--zeile);
		margin-bottom: -25px;
}

footer dl, footer .fussnav {
		width: 25%;
		margin-right: 1px;
}

footer dl:nth-child(2), footer .fussnav {
		width: inherit;
}

.ipr {
		display: table-cell;
		width: 25%;
}

.iku {
		width: 25%;
		padding-left: 5px;
}

.ime {
		width: 13%;
		padding-left: 10px;
}

.ior {
		display: table-cell;
}

.ija {
		width: 15%;
		padding-left: 15px;
}

.ibu {
		display: table-cell;
		width: auto;
}

#index tr.open:hover .ibu figure, #index tr.Archiv:hover .ibu figure {
		display: block;
}

.blogentry {
		width: calc(24.5% - var(--zeile));
}

.mobile {
		display: none;
}

.desktop {
		display: inline-block;
}

#description {
		float: left;
		width: calc(25% - var(--zeile) * 2);
}

#projimages {
		float: right;
		position: relative;
		top: -20px;
		width: calc(75% - 5px);
}

#more, #more_nav {
		clear: both;
		padding-top: 40px;
}

#fineprint.profilinfos {
		clear: both;
		width: auto;
		padding-top: 60px;
		font-size: 15px;
		line-height: 20px;
		letter-spacing: 0.035em;
}

#project.profile {
		margin-right: 0;
}

.profilinfos div {
		width: calc(25% - var(--zeile));
		margin-right: calc(var(--zeile) - 4px);
}

#project, #index, #blogerview {
		margin-top: calc(var(--zeile) * 4);
}

}


/*		A B   1 4 0 0
----------------------------------------------- */

@media screen and (min-width: 1400px) {

footer dl:nth-child(2), footer .fussnav {
		width: 12%;
		margin-right: 6px;
}

header nav {
		width: 12.2%;
		margin-right: 16px;
}

nav li::before {
		top: 1px;
		font-size: 19px;
}

#index thead span {
		font-size: 17px;
}

.ibu {
		top: 1px;
		font-size: 19px;
}

.blogentry {
		margin-bottom: 100px;
}

#dots {
		width: 115px;
}

}


/*		A B   1 4 5 0
----------------------------------------------- */

@media screen and (min-width: 1450px) {

.blogentry {
		width: calc(24.75% - var(--zeile));
}

}


/*		A B   1 7 0 0
----------------------------------------------- */

@media screen and (min-width: 1700px) {

#wrapper {
		position: relative;
		width: 1660px;
		margin: 20px auto 0;
		padding-left: 25px;
}

#dots {
		top: 0;
		right: 25px;
}

#more_nav {
		margin-right: 24px;
}

}


/*		B I L D R A S T E R
----------------------------------------------- */

#projimages .bildraster {
		--anzahl: 1;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		column-gap: var(--zeile);
}

#projimages .bildraster figure,
#projimages .bildraster .embedblock {
		flex: 0 0 100%;
		margin: 0 0 var(--zeile);
}

#projimages .bildraster img {
		display: block;
		width: 100%;
		height: auto;
		margin: 0;
}

@media screen and (min-width: 700px) {
	#projimages .bildraster { margin-top: var(--zeile); }
	#projimages .bildraster.reihe-2 { --anzahl: 2; }
	#projimages .bildraster.reihe-3 { --anzahl: 3; }
	#projimages .bildraster.reihe-4 { --anzahl: 4; }
	#projimages .bildraster.reihe-5 { --anzahl: 5; }
	#projimages .bildraster.reihe-6 { --anzahl: 6; }
	#projimages .bildraster figure { flex-basis: calc((100% - (var(--anzahl) - 1) * var(--zeile)) / var(--anzahl)); }
}

#projimages .bildraster + .bildraster {
		margin-top: 0;
}


/*		B I L D A N S I C H T
----------------------------------------------- */

.bildansicht {
		position: fixed;
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		margin: 0;
		padding: 0;
		border: 0;
		background: var(--grund);
		color: var(--text);
		overflow: clip;
		outline: none;
}

.bildansicht::backdrop {
		background: transparent;
}

.bildansicht figure {
		position: absolute;
		inset: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
}

.bildansicht img {
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
		object-fit: contain;
		opacity: 0;
		transition: opacity 0.3s;
}

.bildansicht img.geladen {
		opacity: 1;
}

.bildansicht button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--text);
		cursor: pointer;
		translate: 0 -1.4px;
}

.bildansicht button:hover {
		color: var(--grau);
}

.bildansicht button:focus-visible {
		outline: 1px solid currentColor;
		outline-offset: -6px;
}

.bildansicht svg {
		fill: none;
		stroke: currentColor;
		stroke-width: 1.33;
}

.bildansicht-leiste {
		position: absolute;
		left: 0;
		right: 0;
		bottom: -8px;
		display: flex;
		justify-content: center;
		align-items: center;
}

.bildansicht-zahl {
		width: 70px;
		margin: 0;
		font: 17px/48px var(--schrift);
		text-align: center;
		user-select: none;
}

.bildansicht-zu {
		position: absolute;
		right: -5px;
		bottom: -6px;
}

.bildansicht.einzeln .bildansicht-zurueck,
.bildansicht.einzeln .bildansicht-weiter {
		display: none;
}

@media screen and (max-width: 800px) {
	.bildansicht figure { inset: 0; }
	.bildansicht-leiste { justify-content: flex-start; }
	.bildansicht .bildansicht-zurueck,
	.bildansicht .bildansicht-weiter { display: none; }
}