@charset "UTF-8";
/* CSS Document */



/* Master */
:root {
	--text-black: hsla(240,3%,12%,1.0);
	--text-grau: hsla(240,2%,54%,1.0);
	--black: hsla(210,0%,0%,1.0);
	--color: hsla(220,100%,15%,1.0);
	--highlight: hsla(210,5%,50%,1.0); /* Grau */
	--gold: hsl(38, 34%, 58%); /* Grau */
	--bg: hsl(40, 0%, 100%);
	--bg-dark: hsla(220,0%,13%,1.0);
	--bg-medium-dark: hsla(220,0%,40%,1.0);
	--bg-medium: hsla(220,0%,50%,1.0);
	--bg-medium-light: hsla(220,6%,75%,1.0);
	--bg-light-medium: hsla(240,11%,96%,1.0);
	--bg-light: hsla(240,25%,98%,1.0);
	--white: hsla(220,0%,100%,1.0);
	--gradient: linear-gradient(90deg, rgba(0,213,255,1) 0%, rgba(255,0,255,1) 100%);
	--gradient-border: linear-gradient(90deg, rgba(0,213,255,1) 0%, rgba(255,0,255,1) 100%) 1;
	--seitenrand: 50px;
	--border-radius: 16px;
	font-family: "Inter", sans-serif;
}

@supports (font-variation-settings: normal) {
  :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	background-position: center;
	background-size: cover;
	outline: 0;
}

*::before, *::after {
	content: none;
}

.visually-hidden {
	display: none;
}

/* Typografie */
html {
	color: var(--text-black);
	font-size: 17px;
	line-height: 1.5;
	font-weight: 400;
	font-variation-settings: "slnt" 0;
}



body {
	background-color: var(--bg);
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:lang(de) {
	quotes: "„" "“" "‚" "‘";
}

p a {
	color: var(--highlight);
}

a {
	color: inherit;
	transition: color .2s ease-in-out;
	text-decoration: none;
}

a:hover {
	color: var(--highlight);
}

b {
	font-weight: 600;
}

i {
	font-style: italic;
}

address, cite {
	font-style: normal;
}

figure {
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 1rem;
	font-weight: 600;
}

h3 {
	font-size: 1rem;
	margin-bottom: .75em;
	font-weight: 600;
}

p, ul, ol, .text {
	margin-bottom: 1em;
}

strong {
	font-weight: 600;
}

ul, ol {
	list-style-type: none;
	padding: 0;
}

li {
	padding-left: 20px;
}

ul li:before {
	content: "•";
	margin-left: -20px;
	margin-right: 13px;
}

ol {
	list-style-type: decimal;
	padding-left: 20px;
}

ol li {
	padding: 0;
	margin: 0;
}

blockquote {
	margin-bottom: 1em;
	font-weight: 500;
	font-style: italic;
}

sup, sub {
	font-size: .618em;
}
/* Ist leider nur vom Browser abhängig und nicht von der gewählten Schrift.
@supports (font-variant-position: super) {
	sup {
		font-size: 1em;
		vertical-align: baseline;
		font-variant-position: super;
	}
}
*/
.teaser {
	font-size: 1.25rem;
	font-style: italic;
	margin-bottom: 3em;
}

button {
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--highlight);
	background-color: hsla(0,0%,0%,0);
	border: 1px solid var(--highlight);
	border-image: var(--highlight);
	padding-left: 20px;
	padding-right: 20px;
	cursor: pointer;
	transition: all .2s linear;
	height: 40px;
	font-size: .85rem;
	font-weight: 500;
	font-variation-settings: "slnt" 0;
}

button:hover {
	color: var(--white);
	background-color: var(--highlight);
	border: 1px solid var(--highlight);
	border-image: var(--highlight);
}

.globalnav, .nav-mini, .filterbox, .pagina-standalone .paginatext {
	font-size: 0.8rem;
}

video {
	object-fit: cover;
}

img {
	pointer-events: none;
}

.color-alternate {
	background-color: var(--bg-light);
	color: var(--black);
}

.color-dark {
	background-color: var(--bg-dark);
	color: var(--white);
}

.color-highlight {
	color: var(--highlight);
}

.full-height {
	height: 100vh;
}

.flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.flex-col {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

.seitenrand {
	padding-left: var(--seitenrand);
	padding-right: var(--seitenrand);
}

.seitenbreite {
	display: flex;
	flex-direction: row;
	width: 100%;
	max-width: 1200px;
}

.textspalten {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.spalte-1-2, .spalte-1-3, .spalte-2-3, .spalte-1-4 {
	margin: 10px;
	margin-bottom: 80px;
}

.spalte-1-2 {
	max-width: 680px;
}

.spalte-1-3 {
	width: 333px;
}

.spalte-2-3 {
	width: 666px;
}

.spalte-1-4 {
	width: 240px;
}

.spalte-1-2-fix {
	width: 50%;
}

.spalte-1-3-fix {
	width: 33%;
}

.spalte-1-4-fix {
	width: 25%;
}

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}



.abschnitt.seitenrand.page {
	padding: 0;
}

.page .abschnitt:nth-child(2n) {
	background-color: var(--bg-light);
}

.hyphens {
	hyphens: auto;
	hyphenate-limit-chars: 10 3 4;
}





.abschnitt {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 50px;
	padding-bottom: 50px;
	width: 100%;
	background-position: center;
	background-size: cover;
}

.abschnitt .randtext {
	position: absolute;
	top: 33%;
	left: 10px;
	writing-mode: tb-rl;
	transform: rotate(-180deg);
	color: var(--text-grau);
}

.abschnitt-page {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1200px;
}

.abschnitt .spalte {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 50%;
	padding: 10px;
}

.abschnitt.headimage {
	height: calc(100vh - 60px - 150px);
}

.abschnitt.full-height {
	height: auto;
	min-height: 100vh;
}

.abschnitt.full-height-navigation {
	height: auto;
	min-height: calc(100vh - 60px);
}

@media (orientation: portrait) {
	.abschnitt.headimage {
		height: 50vh;
		transition: all .2s;
	}

	.abschnitt.full-height {
		min-height: 50%;
		height: auto;
		transition: all .2s;
	}

	.abschnitt.full-height-navigation {
		min-height: 50vh;
		height: auto;
		transition: all .2s;
	}
}



/* Apple Music */
.apple-music {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	width: 100%;
}

.apple-music iframe {
	margin: 10px;
}




/* Accordion */

.accordion {
	list-style-type: none;
	width: 700px;
	font-size: 1rem;
}

.accordion .entry {
	padding: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 1px solid var(--bg-medium-light);
}

.accordion .entry::before {
	content: none;
}

.accordion .entry:last-child {
	border-bottom: 1px solid var(--bg-medium-light);
}

.accordion .labelrow {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.accordion input {
	display: none;
}

.accordion label {
	display: block;
	cursor: pointer;
	color: var(--text-black);
	margin: 0;
	padding: 0;
}

.accordion .label-text {
	font-size: 1.3rem;
	margin-bottom: 0;
	font-weight: 600;
}

.accordion .icon {
	font-size: 1.2em;
	font-weight: 600;
}

.accordion .icon::before {
	content: "+";
}

.accordion input:checked + label .icon::before {
	content: "-";
}

.accordion .content {
	display: none;
	overflow: hidden;
	padding-top: 1em;
	font-size: 1em;
}

.accordion input:checked + label + .content {
	display: block;
}















/* Alphabet List */

.alphabet-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}

.alphabet-list-letter {
	font-size: 6rem;
	margin-top: -.4em;
	margin-left: -8px;
}

.alphabet-list-column {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	margin: 40px 20px 40px 20px;
}

.alphabet-list-letter {
	width:100px;
	text-align:right;
}

.alphabet-list-line {
	display: none;
	height: 1px;
	background-color: hsla(0, 0%, 0%, .2);
	width: 20px;
}

.alphabet-list-list {
	margin-top: -7px;
	padding-left: 10px;
	width:200px;
}

.alphabet-list-list li:before {
	content: none;
}

.alphabet-list-link {
	text-decoration: none;
	transition-duration: .3s;
}

.alphabet-list-link:hover {
	color: var(--highlight);
}















/* Artikel */

.artikel {
	width: 100%;
	max-width: 640px;
	display: flex;
	flex-direction: column;
	margin-top: 10vh;
}

.artikel .infospalte {
	font-size: 0.8rem;
}

.artikel .artikelspalte {
	width: 100%;
}

.artikel .titel {
	font-size: 3em;
	margin-bottom: 1em;
	line-height: 1em;
}

.artikel h3 {
	font-weight: 700;
}

.artikel p {
	margin-bottom: 1.4211em;
}

.artikel img {
	width:100%;
	height:auto;
	margin-top: 20px;
	margin-bottom: 20px;
	border-radius: var(--border-radius);
}

.artikel a {
	color: var(--highlight);
}

@media screen and (max-width: 900px) {
	.artikel footer {
		padding: 10px;
	}
}












/* Contentslider */

.contentslider {
width: 100%;
margin-top: 40px;
margin-bottom:40px;
}

.contentslider-slider-box {
width: 100%;
overflow: auto;
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
}

.contentslider-slider-box::-webkit-scrollbar {
	display: none;
}

.contentslider-slider-box::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
}

.contentslider-slider-box::-webkit-scrollbar-thumb {
	border-radius: 10px;
	color: red;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

.contentslider-content-wrapper {
display: flex;
flex-direction: row;
width: auto;
padding: 10px;
}

.contentslider-content-element {
margin: 10px;
width: 300px;
height: 300px;
flex-shrink: 0;
flex-grow: 0;
}

.contentslider-content-element img {
width: 100%;
height: auto;
}

.contentslider-hint {
display: flex;
justify-content: center;
text-transform: uppercase;
letter-spacing: .1em;
font-size: .6rem;
font-weight: 600;
color: hsla(0, 0%, 60%, 1);
}













/* Filterbox */

.filterbox {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	border-top: 1px solid var(--bg-light);
	border-bottom: 1px solid var(--bg-light);
	min-height: 60px;
	color: var(--black);
	width: 100%;
}

.filterbox.no-border {
	border: none;
}
/*
.filterbox .number {
	font-variant-position: super;
}
*/
.filterbox a {
	padding: 10px;
}

.filterbox .pagina {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.pagina-standalone {
	color: var(--text-grau);
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding:20px;
}

.pagina-standalone .button {
	color: var(--text-grau);
	background-color: hsla(0,0%,0%,0);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--text-grau);
	min-width: 40px;
	height: 40px;
	font-weight: 600;
}

.pagina-standalone .button:hover {
	color: var(--white);
	background-color: var(--text-grau);
}

.pagina-standalone .paginatext {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 40px;
	padding-bottom: 4px;
}













/* Footer */

.footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 40px;
	padding-bottom: 20px;
	color: var(--text-grau);
	background-color: var(--bg-light-medium);
	font-size: 0.8rem;
	line-height: 2em;
}

.footer h3 {
	margin-bottom: 0;
	color: var(--black);
	font-size: 1em;
	font-weight: 600;
}

.footer a {
	color: var(--text-grau);
}

.footer a:hover {
	color: var(--highlight);
}

.footer-main {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	width: 810px;
}

.footer .spalte {
	width: 250px;
	margin: 10px;
}

.footer .copyright {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 40px; /* Entfernen oder auf 0 setzen, wenn Social Media Icons aktiv sind. */
	font-size: 0.75em;
}

.footer-icons {
	display: flex;
	justify-content: center;
	padding-top: 40px;
	padding-bottom: 30px;
}

.footer .icon {
	margin: 5px;
	width: 30px;
	height: 30px;
	border: 1px solid var(--bg-medium-light);
	fill: var(--bg-medium-light);
	transition: fill .2s;
}

.footer svg {
	fill: var(--bg-medium);
}

.vimeo:hover {
	fill:rgb(0,175,242);
}

.youtube:hover {
	fill:rgb(255,0,0);
}

.behance:hover {
	fill:rgb(0,86,255);
}

.facebook:hover {
	fill:rgb(61,90,153);
}

.instagram:hover {
	fill: black;
}

.linkedin:hover {
	fill:rgb(0,116,181);
}

.xing:hover .xing-left {
	fill:rgb(0,90,95);
}

.xing:hover .xing-right {
	fill:rgb(212,214,0);
}

@media screen and (max-width: 910px) {
	.footer-main {
		width: 540px;
	}
}

@media screen and (max-width: 640px) {
	.footer-main {
		width: 100%;
	}
}








/* Galerie */

.galerie {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
position: relative;
width: 100%;
}

.galeriebildwrapper {
display: table;
position: relative;
margin: 10px;
width: auto;
}

.galeriebildcontainer {
cursor: pointer;
/* flex-grow: 1; */
height: 200px;
width: auto;
overflow: hidden;
border-radius: 0px;
}

.galeriebildcontainer img {
height: 100%;
transition: all .5s ease;
}

.galeriebildcontainer:hover img {
transform: scale(1.05);
}

.bildunterschrift {
position: relative;
display: table-caption;
caption-side: bottom;
margin-top: .8em;
margin-bottom: .8em;
font-size: .8em;
font-weight: 400;
color: var(--text-grau);
}


















/* Headimage */

.headimage {
	position: relative;
	height: calc(100% - 60px);
	width: 100%;
	background-color: var(--bg-light);
}

.headimage .media-wrapper {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.headimage .media-wrapper img {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.headimage .overlay {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: hsla(0, 0%, 0%, .25);
}

.headimage .text-wrapper {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 50px;
}

.headimage .text {
	color: var(--white);
	width: 100%;
}

.headimage h1 {
	font-size: 64px;
	font-weight: 500;
}

.headimage p {
	font-size: 1rem;
	max-width: 512px;
}



/* Pagecover */

.pagecover {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: calc(100vh - 60px);
	min-height: 50vw;
	color: white;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 30px;
    background-blend-mode: darken;
	overflow: hidden;
}

.pagecover .titlewrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	font-size: 12vw;
}

.pagecover .tophead, .pagecover .subhead {
	text-transform: uppercase;
	letter-spacing: 0.2em;
	margin-bottom: 0;
	font-weight: 700;
	color: var(--gold);
	font-size: .15em;
}

.pagecover .pagetitle {
	width: 100%;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.2em;
	line-height: 1em;
	font-size: 1em;
	font-weight: 700;
	margin: 0.15em;
	margin-left: 0;
	margin-right: 0;
	overflow-wrap: break-word;
}

.pagecover .spacer {
	height: 5vh;
	min-height: .3em;
	width: 100%;
	flex-grow: 0;
}

.pagecover .description {
	text-align: center;
	max-width: 640px;
	font-size: 1.2rem;
}

@media screen and (max-width: 900px) {
	.pagecover .tophead, .pagecover .subhead {
		font-size: 1.2rem;
	}
}



/* Menu */
.globalnav * {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.globalnav::-webkit-scrollbar {
	display: none;
}

.globalnav {
	overflow: scroll;
	scrollbar-width: none;
}

.globalnav li {
	list-style-type: none;
	margin: 0;
}

.globalnav li::before, .nav-mini li:before {
	content:none;
}

.globalnav a {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
}

.menu-main {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0;
	z-index: 900;
	min-height: 60px;
}

.menu-wrapper {
	width: 100%;
}

.menu-wrapper.row {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: flex-start;
	margin-top: 40px;
	margin-bottom: 40px;
}
/*
.menu-wrapper.row .menu-list:nth-child(2) {
	font-size: 20px;
}
*/
.submenu {
	background-color: var(--bg-light-medium);
	color: var(--black);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 999;
	min-height: 60px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.submenu .menu-list {
	justify-content: center;
}

.menu-list {
	min-height: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
}

.menu-list.column {
	flex-direction: column;
	padding-right: 30px;
}

.menu-list li {
	margin: 0;
}

.menu-item {
	padding: 5px;
	padding-left: 8px;
	padding-right: 8px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	cursor: pointer;
}

.menu-item.logo, .menu-item.logo-mini {
	padding: 0;
	font-weight: 600;
}

.spalte-headline {
	font-size: 11px;
	color: var(--text-grau);
	font-weight: 600;
	cursor: default;
}

.spacer {
	flex-grow: 1;
}

.visible {
	display: flex;
}

.nav-main-left a {
	font-weight: 600;
}

.nav-mini {
	display: none;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 60px;
	background-color: white;
	z-index: 800;
}

.nav-mini .menu-wrapper {
	justify-content: flex-start;
	width: 100%;
	padding: 0;
	padding-left: 20px;
	padding-right: 20px;
}

.nav-mini .menu-list {
	flex-direction: row;
}

.nav-mini .spacer {
	display: flex;
}

.menu-list-mini {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-left: 20px;
	margin-right: 20px;
}

.header-mobile {
	display: none;
	flex-direction: row;
	justify-content: space-between;
	font-size: 30px;
	font-weight: 300;
	margin: 0px;
	padding: 0px;
	padding-bottom: 40px;
	width: 100%;
}

@media screen and (max-width: 900px) {
	.nav-mini {
		display: flex;
	}

	.menu-main {
		background-color: var(--bg-light-medium);
		color: var(--black);
		position: absolute;
		top: 0px;
		left: 0px;
		min-height: 100%;
		display: none;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		font-size: 20px;
	}

	.submenu {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		min-height: 100%;
		padding: 0;
		flex-direction: column;
		justify-content: flex-start;
		border: none;
		font-size: 20px;
	}

	.menu-wrapper {
		justify-content: flex-start;
		width: 100%;
		padding: 20px;
	}

	.menu-wrapper.row {
		flex-direction: column;
		margin: 0px;
	}

	.menu-list {
		flex-direction: column;
	}

	.submenu .menu-list {
		padding-bottom: 40px;
	}

	.menu-item {
		height: auto;
	}

	.logo, .spacer {
		display: none;
	}

	.pagecover .spacer {
		display: flex;
	}

	.visible {
		display: flex;
	}

	.header-mobile {
		display: flex;
	}

}















/* Musicalbum */

.musicalbum-center {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 20px;
}

.musicalbum {
	position: relative;
	width: 100%;
	max-width: 800px;
	display: flex;
	flex-direction: row;
}

.musicalbum .cover {
	display: flex;
	flex-direction: row;
	flex-grow: 0;
	flex-shrink: 0;
	width: 200px;
	padding-top: 40px;
}

.musicalbum .imagewrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.musicalbum .imagewrapper img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: all .4s ease-in-out;
}

.musicalbum .tracks {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 40px;
}

.musicalbum .artist {
	font-size: 1em;
	margin-bottom: 2em;
	color: var(--text-grau);
	font-weight: 500;
}

.musicalbum .trackliste {
	margin-left: 25px;
}

.musicalbum .trackliste li {
	padding-top: .2em;
	padding-bottom: .2em;
	padding-left: 0px;
}

.musicalbum .trackliste li:before {
	content: none;
}

.musicalbum .tunenames {
	font-size: .8em;
	color: var(--text-grau);
}











/* Newsliste */

.newsliste {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
	width:100%;
}

.newsliste .seitenrand {
	padding-left: 0;
	padding-right: 0;
}

.newsliste .abschnitt-jahr,
.newsliste .abschnitt-monat,
.newsliste .abschnitt-tag {
	display: flex;
	flex-direction: row;
	width: 100%;
	position: relative;
}

.newsliste .content-jahr,
.newsliste .content-monat,
.newsliste .content-tag {
	width: 100%;
}

.newsliste .content-tag {
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 100px;
	border-top: 1px solid var(--bg-medium-light);
	margin-top: 52px;
}

.newsliste .spalte-jahr {
	position: relative;
}

.sticky {
	position: sticky;
	top: 20px;
}

.newsliste .datum,
.newsliste .datum-responsive {
	font-size: 2.618rem;
	font-weight: 700;
	width: 100%;
	padding-right:20px;
	padding-top: 20px;
	font-variant-numeric: tabular-nums;
}

.newsliste .datum-responsive {
	display: none;
}

.newsliste .container-jahr .content-jahr {
	flex-grow: 1;
}

.newsliste .content-tag {
	padding-top: 12px;
}

.newsliste .eintrag {
	width: 100%;
	margin: 0px;
	margin-top: 40px;
	margin-bottom: 40px;
	color: var(--text-grau);
}

.newsliste .eintrag .titel {
	font-size: 2rem;
	font-weight: 600;
	color: var(--text-black);
	margin-bottom: 1rem;
}

.eintrag .imagewrapper {
	overflow: hidden;
	margin: 0px;
	padding: 0px;
	margin-top: 1rem;
}

.newsliste .eintrag img {
	display: block;
	width: 100%;
	transition: all .5s ease;
}

.eintrag:hover img {
	transform: scale(1.05);
}

.newsliste .eintrag .bildunterschrift {
	position: absolute;
	margin-top: .5rem;
	width: 100%;
}

.newsliste .bild_des_tages {
	cursor: pointer;
}

.newsliste .eintrag .zitat {
	width: 100%;
	padding: 0px;
	margin: 0px;
	font-size: 1rem;
	color: var(--text-black);
}

.newsliste .eintrag .kategorie {
	font-size: 12px;
	color: var(--text-grau);
}

.newsliste .footer {
	background-color:unset;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	font-size: 12px;
	color: var(--text-grau);
	margin-top: -2px;
}

.newsliste .footer * {
	font-size: 12px;
}














/* paragraphenliste */

.paragraphenliste {
	width: 100%;
	max-width: 1000px;
}

.paragraphenabsatz {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.paragraphenmarginalie {
	width: 30%;
	margin: 10px;
	color: var(--text-grau);
}

.paragraphenmarginalie {
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .05em;
	padding-top: 6px;
}

.paragraphenspalte {
	width: 70%;
	max-width: 1000px;
	margin: 10px;
}













/* Postliste */

.postliste {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	list-style-type: none;
	font-size: .8rem;
	margin: -10px;
	width: 100%;
}

.postcontainer {
	padding: 0px;
	flex-grow: 0;
	position: relative;
	width: 360px;
	margin: 18px;
	overflow: hidden;
	border-radius: var(--border-radius);
	background-color: var(--white);
	box-shadow: 0 0 10px #dddddd;
}

.postcontainer::before {
	content: none;
}

.postcontainer a {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.postbild {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.postbild img {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all .4s ease-in-out;
}

.postoverlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	color: white;
	background-color: hsla(0,0%,0%,.8);
	opacity: 0;
	transition: opacity .3s linear;
}

.postcontainer:hover .postoverlay {
	opacity: 1;
}

.postcontainer:hover .postbild img {
	transform: scale(1.05);
}

.postliste li a:hover {
	color: black;
}

.postliste-textcontainer {
	display: flex;
	flex-direction: column;
	padding: 24px;
	flex-grow: 1;
}

.postliste-footer, .postliste-kategorie {
	color: var(--text-grau);
	font-size: .8em;
	letter-spacing: .01em;
	margin-top: 1em;
}

.postliste-kategorie {
	margin-bottom: 1em;
	margin-top: 0em;
}

.postliste-textcontainer-titel {
	margin-bottom: .1em;
	font-size: 1.5em;
	line-height: 1.2em;
	text-transform: none;
	font-weight: 600;
}

.postliste-beschreibung {
	flex-grow: 1;
	padding-bottom: 0;
	margin-bottom: 0;
	font-size: 1em;
	text-transform: none;
	font-weight:normal;
}

/* Styles für die Größenanpassung der Cards */
.postcontainer.small {
	width: 250px;
	font-size: .8rem;
}

.postcontainer.small .postliste-textcontainer {
	padding: 20px;
}

.postcontainer.medium {
	width: 300px;
	font-size: .9rem;
}

.postcontainer.medium .postliste-textcontainer {
	padding: 25px;
}

.postliste.small {

	& .postcontainer {
		border-radius: calc(var(--border-radius) / 2);
	}
	
	& .postcontainer a {
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	& .postcontainer a {
		flex-direction: row;
	}

	& .postbild {
		width: 100px;
		height: 100%;
	}

	& .postliste-textcontainer {
		width: 100px;
		padding: 16px;
		
		& .postliste-textcontainer-titel {
			font-size: 1rem;
		}
	}
}

.postliste.musikalben {
	& .postbild {
		aspect-ratio: 1/1;
	}

	& .postliste-textcontainer-titel {
		font-size: 1em;
	}
}

@media screen and (max-width: 890px) {

	.postcontainer {
		width: 280px;
		margin: 10px;
		font-size: 12px;

		
	}

}








/* Progressbar */

.progressbar-container p {
	margin: 0;
	margin-bottom: 4px;
}

.progressbar-container li {
	padding: 0;
}

.progressbar-container li:before {
	content: "";
margin-left: 0px;
margin-right: 0px;
}

.progressbar-container {
	width: 100%;
	list-style: none;
	list-style-type: none;
	font-size: .8rem;
}

.progressbar-container .textcontainer {
	display: flex;
	flex-flow: row;
	width: 100%;
}

.progressbar-container .textcontainer p {
	flex-grow: 1;
}

.progressbar-container .text-right {
	text-align: right;
}

.progressbar-entry {
	margin-bottom: 15px;
}

.progressbar-bg {
	width: 100%;
	height: 3px;
	background-color: hsla(0, 0%, 80%, 1);
	border-radius: 2px;
	overflow: hidden;
}

.progressbar {
	height: 100%;
	background-color: var(--highlight);
	border-radius: 2px;
}




/* Metadaten */

.metadaten {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	font-size: 0.8rem;
	width: 100%;
	margin-bottom: 2em;
}

.metadaten .spalte {
	display: flex;
	flex-direction: column;
	width: 170px;
	margin-right: 3em;
	margin-bottom: 2em;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.metadaten .name {
	color: var(--black);
}

.metadaten .content {
	color: var(--bg-medium);
}

.projektdetails-details-wrapper .metadaten {
	padding-right: 20px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	flex-grow: 1;
	min-width: 33%;
}

.projektdetails-details-wrapper .metadaten .spalte {
	padding: 0;
}

.projektdetails-details-wrapper.no-description .metadaten {
	flex-direction: row;
}

.projektdetails-details-wrapper {
	flex-grow: 1;
	min-width: 33%;
}







/* Projektdetails */

.projektdetails {
	display: flex;
	flex-direction: row;
	width: 100%;
	max-width: 1200px;
	margin-bottom: 80px;
}

.projektdetails-beschreibung {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

.projektdetails-beschreibung blockquote {
	color: var(--bg-medium);
	margin-bottom: 20px;
	font-style: italic;
}

.projektdetails-beschreibung h3 {
	margin-top: 20px;
}

.projektdetails-beschreibung h3:first-child {
	margin-top: 0px;
}

@media screen and (max-width: 720px) {

	.projektdetails {
		flex-direction: column;
	}

	.projektdetails-details-wrapper {
		width: 100%;
		flex-direction: row;
	}

	.projektdetails-details-wrapper .metadaten {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.projektdetails-details-wrapper .metadaten .spalte {
		width: 200px;
	}

}










/* Rechnung */

.rechnung {
	font-weight: 400;
	font-size: 8pt;
	line-height: 12pt;
	margin: 0;
	font-feature-settings: 'tnum';
	-webkit-font-feature-settings: 'tnum';
	-moz-font-feature-settings: 'tnum';
}

.rechnung section {
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	flex-grow: 1;
}

.rechnung p {
	margin: 12pt 0 0 0;
}

.rechnung .seite {
	width: 595.3pt;
	/* A4 height in pt */
	/*height: 841.9pt;*/
	padding: 0 85pt 0 85pt;
	box-sizing: border-box;
	border: 1px solid #eeeeee;
}

.rechnung .briefkopf {
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	height: 300pt;
}

.rechnung .logo-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width:100%;
	height:150pt;
}

.rechnung .logo {
	width:66pt;
	height: auto;
}

.rechnung .briefkopf-infos {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	width: 100%;
}

.rechnung .absender {
	font-size: 6pt;
}

.rechnung .kopfdatenfeld {
	position: relative;
	font-size: 6pt;
	line-height: 8pt;
}

.rechnung .kopfdatenbezeichnungsfeld {
	position: absolute;
	width:30pt;
	top: .8pt;
	left: -35pt;
	text-align: right;
	font-size: 4pt;
	line-height: 8pt;
	text-transform: uppercase;
}

.rechnung .nummernfeld {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	align-items: flex-end;
	height: 45pt;
	font-size: 6pt;
}

.rechnung .nummer {
	font-size: 12pt;
	font-weight: 400;
}

.rechnung .haupttext {
	display: flex;
	flex-flow: column;
}

.rechnung .betreff {
	font-size: 14pt;
	font-weight: 100;
}

.rechnung table {
	font-size: 6pt;
	border-collapse: collapse;
	width: 100%;
}

.rechnung td {
	padding: 4pt;
	vertical-align: baseline;
}

.rechnung .tabellenkopf {
	font-size: 6pt;
	font-weight: 600;
}

.rechnung .tabellenkopf td, .rechnung .beschreibungszeile td {
	border-bottom: 1px solid black;
}










/* Sharebox */

.sharebox {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 0;
	padding-top: 30px;
	padding-bottom: 30px;
	color: var(--bg-medium);
}

.sharebox .headline {
	font-size: 1em;
	font-weight: 400;
	margin-bottom: 5px;
}

.sharebox ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
}

.sharebox li {
	display: flex;
	align-items: center;
	justify-content: center;
	list-style-type: none;
	padding: 0;
	margin-left: 2px;
	margin-right: 2px;
	border: 1px solid var(--bg-medium-light);
}

.sharebox li::before {
content: none;
}

.sharebox li a {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sharebox img {
width: 28px;
height: 28px;
}










/* Side By Side */

.sidebyside {
	display: flex;
	flex-direction: row;
	width: 100%;
}

.spalte img {
	max-width: 100%;
	max-height: 100%;
}

.spalte.text {
	padding: 50px;
}

@media screen and (max-width: 800px) {
	.sidebyside {
		flex-direction: column;
	}

	.sidebyside .spalte {
		width: 100%;
	}

	.spalte.text {
		padding: 10px;
	}

}












/* Slider */

.slider {
width: 100%;
text-align: center;
overflow: visible;
}

.slides {
	padding: 10px;
display: flex;
	overflow-x: auto;
scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;

/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
	width: 10px;
height: 5px;
}
.slides::-webkit-scrollbar-thumb {
background: var(--bg-medium);
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 300px;
height: 300px;
margin: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;

display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
/* 
.slides > div:target {
transform: scale(0.8); 
}
*/
.author-info {
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 0.75rem;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
.author-info a {
color: white;
}
.slider img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.slider > a {
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: white;
text-decoration: none;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 0 0.5rem 0;
position: relative;
}
.slider > a:active {
top: 1px;
}
.slider > a:focus {
background: #000;
}

/* Don't need button navigation */
@supports (scroll-snap-type:mandatory) {
.slider > a {
	display: none;
}
}








/* Slideshow */
.slideshow-container, .slideshow-container-fixed {
	display: flex;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background-color: var(--black);
	border-color: var(--white);
	color: var(--text-grau);
	font-size: 1rem;
}

.slideshow-container-fixed {
	position: fixed;
	top:0px;
	left: 0px;
	display: none;
	z-index: 100;
	padding: 0px 80px 0px 80px;
	background-color: var(--bg-light-medium);
	border-color: hsla(0,0%,0%,1);
}

/* Hide the images by default */
.slideshow .mySlides, .slideshow .mySlides-fixed {
	display: none;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	align-items: center;
}

.slideshow .mySlides-fixed {
height: calc(100% - 100px);
	background-size: contain;
}

.slideshow-overlay, .slideshow-overlay-fixed {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
position: absolute;
width: 100%;
height: 100%;
padding: 50px;
box-sizing: border-box;
}

.slideshow-overlay-fixed {
	align-items: center;
}

.slideshow-textbox {
position: absolute;
padding: 16px;
background-color: hsla(0, 0%, 0%, .75);
}

/* Next & previous buttons */
.slideshow .prev, .slideshow .next, .slideshow .close-fixed {
	cursor: pointer;
	display: flex;
	position: absolute;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	transition: 0.6s ease;
	border: 1px solid;
}

.slideshow-container-fixed .prev, .slideshow-container-fixed .next, .slideshow-container-fixed .close-fixed {
	color: var(--text-grau);
	background-color: hsla(0,0%,0%,0);
}

.slideshow-container .prev, .slideshow-container .next {
	color: var(--white);
	background-color: hsla(0, 0%, 0%, 0);
}

.slideshow .prev, .slideshow .next {
	top: calc(50% - 20px);
	font-weight: 600;
}

.slideshow .prev {
	left: 20px;
}

.slideshow .next {
	right: 20px;
}

.slideshow .close-fixed {
	font-size: 30px;
	top: 20px;
	right: 20px;
}

/* On hover, add a black background color with a little bit see-through */
.slideshow-container-fixed .prev:hover, .slideshow-container-fixed .next:hover, .slideshow-container-fixed .close-fixed:hover {
	color: var(--white);
	background-color: var(--text-grau);
}

.slideshow-container .prev:hover, .slideshow-container .next:hover {
	color: var(--white);
	background-color: hsla(0,0%,100%,.5);
}

.slideshow .close {
	position: absolute;
	top: 20px;
	right: 20px;
	color: var(--highlight);
	cursor: pointer;
	display: none;
}

/* Caption text */
.slideshow .text {
	padding: 8px 12px;
	position: absolute;
	bottom: 20px;
	width: 100%;
	text-align: center;
}

.slideshow .numbertext {
	font-size: 0.8em;
}

/* Number text (1/3 etc) */
.slideshow-container-fixed .numbertext {
	position: absolute;
	top: 10px;
	left:50%
}

.slideshow-container .numbertext {
	display: none;
}

.slideshow .bottomdiv {
	position: absolute;
	bottom: 15px;
	width: 100%;
	text-align: center;
	cursor: default;
}

/* The dots/bullets/indicators */
.slideshow .dot {
	cursor: pointer;
	height: 7px;
	width: 7px;
	margin: 0 0px;
	background-color: none;
	border-radius: 50%;
	display: inline-block;
	transition: all 0.6s ease;
	border: 1px solid;
}

.slideshow-container .dot {
	color: var(--white);
}

.slideshow-container .dot:hover {
	background-color: var(--white);
}

.slideshow-container-fixed .dot:hover {
	background-color: var(--text-grau);
}

.slideshow-container .active {
background-color: var(--white);
}

.slideshow-container-fixed .active {
background-color: var(--text-grau);
}

/* Fading animation */
.slideshow .fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 0.5s;
animation-name: fade;
animation-duration: 0.5s;
}

@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}











/* Spalten */

.spaltenwrapper {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	flex-wrap: wrap;
}

.spaltenwrapper .spalte {
	justify-content: space-between;
	margin-bottom: 20px;
}

.spaltenwrapper .spalte-1-1 {
	width: 100%;
}

.spaltenwrapper .spalte-1-2 {
	width: 680px;
}

.spaltenwrapper .spalte-1-3 {
	width: 330px;
}

.spaltenwrapper .spalte-1-4 {
	width: 250px;
}

.spaltenwrapper .footer {
	padding: 0;
	margin: 0;
}












/* Special Number */

.special-number {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-content: center;
	text-align: center;
	padding: 20px;
}

.special-number-number {
	color: var(--text-black);
}

.special-number-toptitle, .special-number-subtitle {
	color: var(--text-grau);
}

.special-number {
font-size: .7rem;
letter-spacing: .03em;
}

.special-number-number {
font-size: 3rem;
font-weight: 200;
}









/* Tagebuch */

.tagebuch {
	max-width: 640px;
}

.tagebuch .absatz {
	margin-bottom: 1em;
}

.tagebuch .datum {
	font-size: 2em;
	font-weight: 600;
	display: block;
	margin-bottom: 20px;
	margin-top: 40px;
}

.tagebuch .zeit {
	font-size: 1em;
	font-weight: 600;
}








/* Titlebox */

.titlebox {
	display: flex;
	justify-content: center;
	width: 100%;
	padding-top: 25px;
	padding-bottom: 25px;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 150px;
	font-size: 2.5rem;
}

.titlebox .title {
	padding-bottom: .2em;
	line-height: 1em;
	font-variant-ligatures: no-common-ligatures;
	margin: 5px 0 5px 0;
	font-size: 1em;
	font-weight: 600;
}

.titlebox cite {
	font-weight: 400;
}

.titlebox .toptitle, .titlebox .subtitle {
	font-weight: 400;
	font-size: 1rem;
	color: var(--text-grau);
}

.titlebox .metaline {
padding-left: .02em;
}

.titlebox .toptitle {
	margin-bottom: .5em;
}

.titlebox .subtitle {
margin-top: .2em;
}

.titlebox hr {
	border: 0;
	height: 1px;
	background: var(--text-grau);
	margin-top: .7em;
}










/* Tunelist */


.tunelist {
	width: 100%;
	padding: 10px;
}

.tunelist {
	font-size: 1.2rem;
}

.tunelist .bild {
	display: none;
	border: none;
	border-image: none;
	width: 50px;
	aspect-ratio: 1/1;
	object-fit: cover;
	margin-right: 20px;
	background-color: var(--bg-light);
}

.tunelist-beat {
	font-variant-numeric: diagonal-fractions;
	-moz-font-feature-settings: "frac";
	-webkit-font-feature-settings: "frac";
	font-feature-settings: "frac";
}

.tunelist-zeile {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	border-bottom: 1px solid var(--bg-light);
	padding: 10px;
	transition: none;
}

.tunelist-zeile:hover {
	background-color: var(--bg-light);
	color: var(--black);
}

.tunelist-spalte {
	width: 100px;
}

.tunelist-id, .tunelist-id_txt {
	display: none;
}

.tunelist-titel {
	flex-grow: 1;
}

.tunelist-kategorie {
	width: 150px;
}

.tunelist-beat {
	width: 60px;
	text-align: right;
}

.tune-player {
	width: 50%;
}







/* Userform */

.userform {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
	width: 500px;
}

.userform label {
	display: inline-block;
	width: 200px;
}

.userform input {
	height: 40px;
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
}

















/* Zitat */

.zitatliste {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	margin: auto;
}

.zitat, .zitat-single {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 300px;
	min-height: 300px;
	text-align: left;
	margin: 10px;
	color: var(--text-grau);
	background-color: var(--bg-light-medium);
	padding: 24px;
	font-size: .8em;
	font-weight: normal;
	font-style: normal;
	border-radius: var(--border-radius);
}

.zitat-single {
	max-width: 720px;
	background-color: transparent;
	min-height: unset;
}

.zitat-zitat {
	font-size: 1rem;
	line-height: 1.2;
	color: var(--black);
	flex-grow: 1;
}

.zitat-single .zitat-zitat {
	font-size: 2rem;
	font-weight: 600;
}

.zitat-anfuehrungszeichen-unten, .zitat-anfuehrungszeichen-oben {
	font-size: 3rem;
}

/*
.zitat-anfuehrungszeichen-oben, .zitat-anfuehrungszeichen-unten {
}
*/

.zitat-anfuehrungszeichen-oben {
	display: none;
	margin-top: -5px;
	margin-bottom: 15px;
}

.zitat-anfuehrungszeichen-unten {
	display: none;
	margin-top: 15px;
	margin-bottom: -5px;
}

.zitat-person {
	margin-top: 15px;
}

.zitat-kategorie {
	margin-bottom: 1em;
	font-size: .9em;
}

.zitat-single .zitat-kategorie {
	display: none;
}

.zitat-person::before {
	content: none;
}

@media screen and (max-width: 640px) {
	.zitat {
		max-width: 100%;
		min-height: auto;
		height:auto;
	}
}



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

	.galeriebildcontainer {
		height: 200px;
	}

}

@media screen and (max-width: 860px) {

	.galeriebildcontainer {
		height: 150px;
	}

	.bildunterschrift {
		margin-top: .6em;
		font-size: .6em;
	}

}

@media screen and (max-width: 640px) {

	html {
		font-size: 16px;
	}

	.seitenrand {
		padding-left: 10px;
		padding-right: 10px;
	}

	.spalte-1-2, .spalte-1-3, .spalte-1-4, .spalte-1-2-fix, .spalte-1-3-fix, .spalte-1-4-fix {
		width: 100%;
		max-width: 100%;
	}

	.seitenbreite {
		flex-direction: column;
	}

	.abschnitt .spalte {
		width: 100%;
	}

	.randtext {
		display: none;
	}

	.accordion {
		width: 100%;
	}

	.artikel {
		flex-direction: column;
		margin-top: 0;
		font-size: 16px;
	}

	.artikel .infospalte {
		width: 100%;
		margin-top: 2em;
		margin-bottom: 2em;
		margin-right: 0px;
		flex-direction: row;
	}

	.artikel .infofeld {
		padding: 10px;
		max-width: 200px;
	}

	.artikel .artikelspalte {
		width: 100%;
		padding: 10px;
	}

	.footer .spalte {
		width: 100%;
	}

	.headimage h1 {
		font-size: 36px;
	}

	.musicalbum-center {
		padding: 0px;
	}

	.musicalbum {
		flex-direction: column;
	}

	.musicalbum .cover, .musicalbum .tracks {
		width: 100%;
		max-width: unset;
		padding: 20px;
	}

	.paragraphenmarginalie {
		display: none;
	}

	.paragraphenspalte {
		width: 100%;
		margin: 10px;
	}

	.spaltenwrapper {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.spaltenwrapper .spalte,
	.spaltenwrapper .spalte-1-1,
	.spaltenwrapper .spalte-1-2,
	.spaltenwrapper .spalte-1-3,
	.spaltenwrapper .spalte-1-4
	{
		width: 100%;
		margin: 0px;
		margin-bottom: 20px;
	}

	.titlebox {
		padding: 0px;
		padding-top: 35px;
		padding-bottom: 25px;
		font-size: 1.5rem;
	}

	.tunelist-kategorie, .tunelist img {
		display: none;
	}

	.tune-player {
		width: 100%;
	}

	.zitat {
		width: 100%;
		margin-left: 10px;
		margin-right: 10px;
	}

	.galerie {
		padding: 0px;
		margin: 0px;
	}

	.galeriebildcontainer {
		margin: 5px;
		margin-left: 0px;
		margin-right: 0px;
		width: 100%;
		height: auto;
	}

	.galeriebildcontainer img {
		width: 100%;
	}

	.bildunterschrift {
		margin-top: .8em;
		font-size: .8em;
	}

	.postliste {
		padding: 5px;
		font-size: 0.8rem;
	}

	.postcontainer {
		width: 100%;
		margin: 10px;
	}

	.newsliste .jahr, .newsliste .monat {
		margin-left: 10px;
		margin-right: 10px;
	}

	.newsliste .eintrag {
		margin: 10px;
		margin-bottom: 40px;
		width: 100%;
		max-width: 100%;
	}

	.newsliste .datum-responsive {
		padding-left: 10px;
		display: inline-block;
	}

	.newsliste .spalte-jahr,
	.newsliste .spalte-monat,
	.newsliste .spalte-tag {
		display: none;
	}

}