/* konform zu CSS3 - copyright 2025 Gerrit Hecht, Gerrit@Squap.de, Squap.de - alle Rechte vorbehalten - erstellt am: 31. Januar 2025 */

/* Normalisierung */

	* {
		margin: 0;
		padding: 0;
		border: 0;
		box-sizing: border-box;
	}
	a,
	button {
		text-decoration: none;
		color: inherit;
	}
	button {
		font: inherit;
		background: transparent;
		cursor: pointer;
	}
	ul {
		list-style: none;
	}
	table {
		border-collapse: collapse;
	}
	main { /* IE9-11 Unterstützung */
		display: block;
	}
	i::after { /* fügt ein Leerzeichen hinter kursivem Text ein */
		content: "\A0";
	}


/* Animationen */

	a,
	a::after,
	nav > ul > li,
	.menueText,
	.menueText::after,
	.menueLinien,
	.menueLinien::before,
	.menueLinien::after {
		-webkit-transition: 0.5s; /* Safari 3.1 to 6.0 */
		transition: 0.5s;
	}

	nav li li {
		-webkit-transition: padding 0.5s, margin 0.5s, opacity 0.2s; /* Safari 3.1 to 6.0 */
		transition: padding 0.5s, margin 0.5s, opacity 0.2s;
	}
	nav .menueOffen	li {
		-webkit-transition: padding 0.5s, margin 0.5s, opacity 0.4s 0.1s; /* Safari 3.1 to 6.0 */
		transition: padding 0.5s, margin 0.5s, opacity 0.4s 0.1s;
	}

@media (max-height: 30em) {
	nav li li,
	nav .menueOffen	li {
		-webkit-transition: none; /* Safari 3.1 to 6.0 */
		transition: none;
	}
}

	
/* Schrift, Zeilenhöhe, Schriftgrößen und -schnitte, Worttrennungen */

	@font-face {
		font-family: 'Open Sans';
		font-style: normal;
		font-weight: 400;
		src: local('Open Sans Regular'), local('OpenSans-Regular'),
			url('_fonts/open-sans-v17-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
			url('_fonts/open-sans-v17-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
	}

	
	body {
		font-size: 100%; /* 100% = 1em = 16px; 120% = 19.2px; 80% = 12.8px; skalierbar von 70 bis 200 */
		line-height: 1.6;
		font-family: 'Open Sans', sans-serif;
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto; 
	}
	h1, h2,
	figcaption {
		-webkit-hyphens: none;
		-ms-hyphens: none;
		hyphens: none; 
	}
	figcaption {
		line-height: 1.4;
	}

	h2,
	nav li {
		font-size: 1.6em;
	}
	h1, h3 {
		font-size: 1.2em;
	}
	.csmv_inhalt i,
	nav > a,
	nav li li,
	footer > p {
		font-size: 0.8em;
	}

	a,
	.menueText {
		font-weight: bold;
	}
	nav > ul,
	footer > ul {
		white-space: nowrap;
	}

@media (max-width: 42em) {
	body {
		font-size: 90%; /* = 1em = 16px; skalierbar von 70 bis 200 */
	}
	nav button {
		font-size: 1em;
		line-height: 0.5em;
	}
}
@media (max-width: 30em) {
	h2,
	nav li {
		font-size: 1.3em;
	}
	h1,
	nav > a,
	nav li li {
		font-size: 0.9em;
	}
}
	
	
/* Hintergründe, Schrift- und Rahmenfarben */

	/* Hintergründe */

	body,
	header {
	 	background: rgba(255, 255, 255, 1) url(_bilder/hg.jpg) center top fixed no-repeat; /* #ffffff weiß */
	}
	footer {
		background-image: linear-gradient(transparent, rgba(169, 104, 0, 1)); /* #a96800 braun */
	}
	main {
	 	background: url(_bilder/celli_800.png) center 7.5em fixed no-repeat;
	}
	article > div {
		background-color: rgba(255, 255, 255, 1); /* #ffffff weiß */
	}
	
	h2 {
		background-image: linear-gradient(white, rgba(169, 104, 0, 1)); /* #a96800 braun */
	}

	a::after,
	.menueText::after,
	.menueSchalter:hover .menueLinien,
	.menueSchalter:hover .menueLinien::before,
	.menueSchalter:hover .menueLinien::after {
		background-color: rgba(128, 64, 0, 1); /* #804000 dunkelbraun */
	}
	
	.menueLinien,
	.menueLinien::before,
	.menueLinien::after {
		background-color: rgba(0, 0, 0, 1); /* #000000 schwarz */
	}
	
	.menueOffen .menueLinien,
	.menueOffen .menueSchalter:hover .menueLinien {
		background: transparent; /* transparent */
	}


	/* Schriftfarben */

	h2 {
		color: rgba(255, 255, 255, 1); /* #ffffff weiß */
	}
	
	a:hover,
	button:hover,
	h1,
	.produkte .produkte,
	.uns .uns {
		color: rgba(128, 64, 0, 1); /* #804000 dunkelbraun */
	}
	h3 {
		color: rgba(169, 104, 0, 1); /* #a96800 braun */
	}
	
	body,
	nav li li {
		color: rgba(0, 0, 0, 1); /* #000000 schwarz */
	}
	

	/* Rahmenfarben */

	header,
	footer {
		border-color: rgba(128, 64, 0, 1); /* #804000 dunkelbraun */
	}
	

@media (max-width: 72em) { /* erreicht max-breite body */
	body {
		/* background: rgba(200, 255, 255, 1); test */
	}
}
@media (max-width: 57em) { /* anpassung produkte */
	body {
		/* background: rgba(200, 150, 255, 1); test */
	}
}
@media (max-width: 42em) { /* verkleinerung auf 90%, menuebuttons über link, inhalt weniger padding */
	body {
		/* background: rgba(255, 200, 200, 1); test */
	}
}
@media (max-width: 30em) { /* neuanordnung kopf, alle wichtigen _bilder zentriert */
	body {
		/* background: rgba(255, 200, 255, 1); test */
	}
}
@media (max-width: 27em) { /* logo rutscht mit nach links */
	body {
		/* background: rgba(200, 200, 255, 1); test */
	}
}
@media (max-width: 22em) { /* minimale breite */
	body {
		/* background: rgba(255, 255, 150, 1); test */
	}
}
@media (max-height: 30em) { /* für handy quer */
	body {
		/* background: rgba(255, 150, 150, 1); test */
	}
}



/* Schatten */

	h2 {
		text-shadow: 0.05em 0.05em 0.05em rgba(0, 0, 0, 0.5);
	}
	
	article > div {
		box-shadow: 0.8em 0.8em 0.8em rgba(46, 61, 73, 0.2);
	}
	figure > img,
	figure > a > img,
	#CSMV > div > img,
	article.portrait > div > img {
		box-shadow: 0.5em 0.5em 0.5em rgba(46, 61, 73, 0.2);
	}
	#KK-LH-001 figure > img {
		box-shadow: none;
	}

	
	
/* Formatierung */

	/* Allgemein */
	
	html {
		height: 100%;
	}
		
	body {
		position: relative;
		min-width: 20em;
	}
	body.fehlt,
	body.index {
		height: 100%;
	}
	
	table {
		margin-bottom: 1.5em;
	}
	td {
		padding: 0 4em 0.5em 0;
	}
	td:last-of-type {
		text-align: right;
		padding: 0 0 0.5em 0;
		min-width: 4em;
	}

	a,
	button {
		display: inline-block;
		position: relative;
	}
	
	a::after,
	.menueText::after {
		content: "";
		display: block;
		position: absolute;
		width: 0;
		margin-left: 50%;
		height: 0.125em;
		bottom: 0.125em;
	}
	a:hover::after,
	.menueSchalter:hover .menueText::after {
		width: 100%;
		margin-left: 0;
	}

	.menueText {
		display: inline-block;
		position: relative;
	}
	.menueLinien,
	.menueLinien::before,
	.menueLinien::after {
		display: inline-block;
		width: 1.2em;
		height: 0.17em;
		border-radius: 0.5em;
	}
	.menueLinien {
		position: relative;
		top: -0.3em;
	}
	.menueLinien::before {
		content: "";
		position: absolute;
		top: 0.4em;
		left: 0em;
	}
	.menueLinien::after {
		content: "";
		position: absolute;
		top: -0.4em;
		left: 0em;
	}

	.menueOffen > .menueSchalter > .menueLinien::before {
		-webkit-transform: rotate3d(0, 0, 1, 45deg);
		transform: rotate3d(0, 0, 1, 45deg);
		top: 0;
	}
	.menueOffen > .menueSchalter > .menueLinien::after {
		-webkit-transform: rotate3d(0, 0, 1, -45deg);
		transform: rotate3d(0, 0, 1, -45deg);
		top: 0;
	}


	/* nachOben */

	#nachOben {
		position: fixed;
		z-index: 50;
		right: 1em;
		padding-top: 1em;
		bottom: -2em;
		opacity: 0;
		-webkit-transform: rotate3d(0, 0, 1, -90deg);
		transform: rotate3d(0, 0, 1, -90deg);
	}
	.gescrollt #nachOben {
		opacity: 1;
		bottom: 3em;
	}
	#nachOben::before {
		content: ">";
		margin-right: 0.2em;
	}
	#nachOben::after {
		bottom: 0;
	}

	.fehlt #nachOben,
	.index #nachOben {
		display: none;
	}

@media (max-width: 42em) {
	#nachOben {
		display: none;
	}
}


	/* Kopf */
	
	header {
		position: fixed;
		z-index: 2;
		top: 0;
		left: 0;
		right: 0;
	}
	
		/* Menü */

	nav {
		padding: 0.5em 1em 0;
	}
	nav > a {
		position: absolute;
		top: 0.5em;
		right: calc(50% - 43.75em);
	}
	nav > a ~ a {
		margin-top: 1.5em;
	}
	.fehlt nav > a {
		display: none;
	}
	nav > a span:last-of-type {
		display: none;
	}
	
		/* Ebene 1 */

	nav > ul {
		display: grid;
		grid-template-columns: 33.3333% 33.3333% 33.3333%;
		max-width: 70em;
		margin: 0 auto;
	}
	nav > ul > li:nth-of-type(1) {
		text-align: left;
		margin-top: 2.3em;
	}
	nav > ul > li:nth-of-type(2) {
		text-align: center;
	}
	nav > ul > li:nth-of-type(3) {
		text-align: right;
		margin-top: 2.3em;
	}
	
	nav .produkte > a {
		position: absolute;
		margin-left: 2em;
	}
	nav .uns > a {
		margin-right: 0.8em;
	}
	nav img {
		width: 7em;
	}

@media (max-width: 72em) {
	nav > a {
		right: 1.2em;
	}
}
@media (max-width: 42em) {
	nav .produkte > a {
		position: relative;
		margin-left: 0;
	}
	nav .uns > a {
		margin-right: 0;
	}

	nav .produkte > button {
		position: absolute;
		top: 1.4em;
		left: 0.7em;
		padding-bottom: 0.5em;
	}
	nav .uns > button {
		position: absolute;
		top: 1.4em;
		right: 0.65em;
		padding-bottom: 0.5em;
	}
	nav .menueLinien {
		top: 0;
	}
}
@media (max-width: 30em) {
	nav > ul > li:nth-of-type(1) {
		margin-top: 3.7em;
	}
	nav > ul > li:nth-of-type(2) {
		margin-bottom: 1.2em;
	}
	nav > ul > li:nth-of-type(3) {
		margin-top: 3.7em;
	}
	nav > a {
		right: 1.25em;
	}
	nav > a span:last-of-type {
		display: inline-block;
	}
	nav > a span:first-of-type {
		display: none;
	}
	
	nav .produkte > button {
		top: 2.3em;
		left: 0.8em;
	}
	nav .uns > button {
		top: 2.3em;
		right: 0.8em;
	}
}
@media (max-width: 27em) {
	nav > ul > li:nth-of-type(2) > a {
		margin-left: calc(50% - 65px);
	}
	.impressum nav > ul > li:nth-of-type(2) > a,
	.imprint nav > ul > li:nth-of-type(2) > a,
	.datenschutz nav > ul > li:nth-of-type(2) > a,
	.privacy nav > ul > li:nth-of-type(2) > a {
		margin-left: 0;
	}
}
@media (max-height: 30em) {
	header {
		position: relative;
	}
	.index header,
	.fehlt header {
		position: fixed;
	}
}

		/* Ebene 2 */

	nav li li {
		position: relative;
		z-index: -1;
		margin-top: -2em;
		opacity: 0;
	}
	li.menueOffen li {
		margin-top: 0;
		opacity: 1;
		z-index: 1;
	}
	li.menueOffen li:last-of-type {
		padding-bottom: 0.3em;
	}
	nav .menueText,
	nav li li button {
		display: none;
	}

	nav li li li {
		padding-left: 1em;
	}
	

	/* Inhalt allgemein */
	
	main {
		position: relative;
		max-width: 70em;
		margin: 0 auto;
	}
	
	article {
		position: relative;
		padding: 7em 0 0;
	}
	article:last-of-type {
		padding-bottom: 5em;
	}

	h1 {
		position: fixed;
		z-index: 3;
		top: 0.2em;
		left: calc(50% - 29.2em);
	}
	.index h1,
	.uns h1,
	.produkte h1 {
		display: none;
	}
	
	h2 {
		text-align: center;
		border-top-left-radius: 0.2em;
		border-top-right-radius: 0.2em;
		padding: 0.5em 2em;
	}
	article > div {
		padding: 3em 3.2em;
		border-bottom-left-radius: 0.4em;
		border-bottom-right-radius: 0.4em;
	}
	
@media (max-width: 72em) {
	h1 {
		left: 0.85em;
	}
	h2 {
		padding: 0.5em 2.6em;
	}
	article > div {
		padding: 3em 4.2em;
	}
}
@media (max-width: 42em) {
	h2 {
		padding: 0.5em 0.6em;
	}
	article > div {
		padding: 3em 1em;
	}
}
@media (max-width: 30em) {
	h1 {
		left: 1.25em;
		top: 0.5em;
	}
	article {
		padding: 7.5em 0 0;
	}
}
@media (max-height: 30em) {
	main {
		position: static;
	}
	h1 {
		position: absolute;
	}
	article {
		padding: 0 0 3em;
	}
	article:last-of-type {
		padding-bottom: 3em;
	}
}

	article p {
		padding-bottom: 1em;
	}
	figure > img,
	figure > a > img {
		border-radius: 0.15em;
	}
	
	h3 {
		margin: 0 0 0.5em;
		text-decoration: underline;
	}
	h4 {
		margin: 0.5em 0 0;
	}

	
	/* Inhalt index */
	
	.fehlt main,
	.index main {
		height: 100%;
	}


	/* Inhalt uns */
	
	article.portrait > div {
		min-height: 28em;
	}

	article.portrait > div > img {
		width: 15em;
		float: left;
		margin: 0.4em 4em 2em 0;
		border-radius: 0.3em;
	}
	article.portrait p img {
		margin-top: 1em;
	}

@media (max-width: 30em) {
	article.portrait > div > img {
		float: none;
		margin: 0 auto 2em;
		display: block;
	}
	#juli p img {
		max-width: 18em;
	}
}


	/* Inhalt produkte */
	
	.produkte article > div {
		display: grid;
		grid-template-columns: 18em auto auto;
		grid-column-gap: 2em;
	}
	.produkte article > div > figure {
		margin: 0.4em auto 3em;
		text-align: center;
	}
	.produkte article > div > figure img {
		max-width: 18em;
		margin-bottom: 0.5em;
	}
	.produkte main p {
		grid-column: 1 / -1;
	}
	.produkte main section {
		margin-bottom: 3em;
	}
	
	#CSMV > div {
		display: block;
	}
	#CSMV > div > figure {
		width: 18em;
		float: right;
		margin: 1em 0 2em 4em;
		border-radius: 0.3em;
	}
	#CSMV > div p:last-of-type {
		display: none;
	}
	
	.csmv_inhalt {
		margin-left: 2em;
	}
	.csmv_inhalt li li {
		padding: 0 0 0 1em;
	}
	
	.notenbeispiele {
		text-align: right;
	}
	.notenbeispiele li {
		padding: 0 0 1em 0;
	}
	.notenbeispiele li li {
		padding: 0 0 1em 0.7em;
	}

	#KK-LH-001 > div {
		grid-template-columns: 18em auto;
	}
	#KK-LH-001 > div > figure img {
		width: auto;
		height: 28em;
	}
	#KK-LH-001 ul {
		padding-left: 1em;
		list-style: disc;
	}
	
	#JH-CD-001 > div {
		grid-template-columns: 15em auto;
		grid-column-gap: 3em;
	}
	#JH-CD-001 > div > figure img {
		max-width: 15em;
	}
	.hoerproben {
		margin-bottom: 4em;
	}
	.hoerproben > ul {
		display: grid;
		grid-template-columns: auto auto 12em;
		grid-column-gap: 2em;
	}
	.hoerproben li > a {
		margin-left: 2em;
		width: 83%;
	}
	.hoerproben li > a::before {
		content: url(_bilder/sym_audio.png);
		position: absolute;
		top: -0.1em;
		left: -1.7em;
	}
	.hoerproben li > a:hover::before {
		content: url(_bilder/sym_audio_aktiv.png);
	}
	.hoerproben audio {
		max-width: 12em;
	}
	
	#PV-BA-00X > div {
		grid-template-columns: auto auto;
		grid-column-gap: 0.5em;
	}
	#PV-BA-00X > div p:last-of-type {
		display: none;
	}
	.celloschule h3,
	.celloschule figure {
		text-align: center;
	}
	.celloschule img {
		width: 15em;
	}
	.celloschule figcaption img {
		width: 12em;
	}
	.celloschule a:first-of-type {
		margin: 0.5em 0 1em;
	}
	
@media (max-width: 57em) {
	.produkte article > div {
		grid-template-columns: auto auto;
	}
	.produkte article > div > figure {
		grid-column: 1 / -1;
	}
	
	.csmv_inhalt {
		margin-left: 0;
	}

	#KK-LH-001 > div > figure {
		grid-column: auto;
	}

	.hoerproben {
		grid-column: 1 / -1;
	}
}
@media (max-width: 30em) {
	.produkte article > div {
		grid-template-columns: auto;
	}
	
	#CSMV > div > figure {
		float: none;
		margin: 2em auto;
		display: block;
	}

	.csmv_inhalt,
	.notenbeispiele {
		text-align: center;
	}

	#KK-LH-001 > div {
		grid-template-columns: auto;
	}
	#KK-LH-001 ul {
		margin-bottom: 3em;
	}
	#KK-LH-001 li p {
		padding-bottom: 0;
	}

	.hoerproben > ul {
		grid-template-columns: auto auto auto;
		grid-row-gap: 0.5em;
		margin-bottom: 0.5em;
	}
	.hoerproben audio {
		display: none;
	}

	#PV-BA-00X > div {
		grid-template-columns: auto;
		grid-column-gap: 0;
	}
}


	/* Fuß */
	
	footer {
		text-align: center;
	}
	.fehlt footer,
	.index footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	footer > p {
		margin: 1em 0 0.5em;
	}

	footer > ul {
		display: -webkit-flex;  /* Safari */
		-webkit-justify-content: space-between;  /* Safari 6.1+ */
		-webkit-flex-wrap: wrap;  /* Safari 6.1+ */
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		max-width: 42em;
		margin: 0 auto;
		text-align: center;
	}
	footer > ul > li {
		margin: 0.5em 1em;
		display: block;
	}
	footer > ul > li > * {
		display: inline-block;
		padding: 0.5em 0 0;
	}

@media (max-width: 42em) {
	footer > ul {
		max-width: 18em;
	}
}