:root
{
	--farbe1: rgba(0, 0, 255, 1); /* Kontrastfarbe */
	--farbe2: rgba(255, 255, 255, 1); /* Helle Farbe */
	--farbe3: rgba(200, 200, 225, 1); /* Hintergrundfarbe */

	--groesse1: min(calc(12px + 0.4vw), 16px); /* klein */
	--groesse2: min(calc(12px + 0.6vw), 28px); /* mittel */
	--groesse3: min(calc(12px + 1.7vw), 44px); /* groß */
	--groesse4: min(calc(12px + 3.5vw), 64px); /* sehr groß */
	
	--fensterrand: 3em;
}

/* Dark-Mode anpassen */
/*@media (prefers-color-scheme: dark)
{
	:root
	{
		--farbe1: rgba(200, 200, 200, 1);
		--farbe2: rgba(100, 100, 100, 1);
		--farbe3: rgba(50, 50, 60, 1);
	}
}*/


html
{
	scroll-behavior: smooth; /* springt langsam zu einem Anker */
}

body
{
	margin: var(--fensterrand);
	background-color: var(--farbe3);
}

header, main, aside, footer, nav ul
{
	max-width: 1024px;
	margin-left: auto;
	margin-right: auto;
}

body, input, textarea, select
{
	font-family: 'Josefin Sans', 'Arial', 'Verdana';
	font-size: var(--groesse1);
	color: var(--farbe1);
	line-height: 1.3em;
}



/* Allgemein: Überschriften */

h1, h2, h3
{
	text-align: center;
	font-size: var(--groesse3);
	line-height: 1.3em;
	font-weight: 400;
}

h2, h3
{
	font-size: var(--groesse2);
}



/* Allgemein: Links */

a
{
	color: currentColor;
	text-decoration: none;
}



/* Allgemein: Bilder */

img
{
	max-width: 100%;
}



/* Allgemein: Listen */

ul
{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}



/* Allgemein: Formulare */

input, textarea, select, form iframe
{
	padding: 0.8em 0.8em 0.7em 0.8em;
    box-sizing: border-box;	
	border: none;
	background-color: var(--farbe2);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none; /* Erscheinungsbild von Formularelementen werden browserunabhängig */
}

form
{
	max-width: 700px;
	margin: 0 auto 0 auto;
}

input:focus
{
    outline: none;
}

input[type="checkbox"]
{
	-webkit-appearance: checkbox;
	-moz-appearance: checkbox;
	appearance: checkbox;
}

input[type="submit"]
{
	background-color: var(--farbe1);
	color: var(--farbe2);
	padding: 0.8em 1.8em 0.7em 1.8em;
	float: right;
	min-width: 7em;
}

input[type="submit"]:disabled
{
	opacity: 0.5;
}

::placeholder
{
	opacity: 0.5;
	color: var(--farbe3);
}



input:-webkit-autofill /* Vorausgefüllte Formularfelder vom Browser werden umgestaltet */
{
    box-shadow: 0 0 0 100px rgba(255, 255, 255, 1) inset;
}











/* Kundenwerbung und Login-Formular */

aside
{
	margin-top: calc((var(--fensterrand) - 2vmin) * -1);
	margin-bottom: 1em;
	display: flex;
	gap: 1em;
	align-items: center;
	justify-content: space-between;
	padding: 1em 0 1em 0;
}

aside div.loginInfo
{
	width: 66%;
	text-align: center;
}

aside div.loginMenue
{
	display: flex;
	gap: 2em;
}

aside div.loginMenue form
{
	display: flex;
	gap: 0.5em;
}

aside div.loginMenue input
{
	width: 100%;
	padding: 0.4em 0.4em 0.3em 0.4em;
}

aside div.loginMenue input[type="submit"]
{
	width: auto;
	padding-left: 0.5em;
	padding-right: 0.5em;
	min-width: initial;
	background: transparent;
	color: var(--farbe1);
}

aside div.loginMenue a.logout
{
	color: rgba(255, 0, 0, 1);
}



/* Gehe zu */

aside div.loginNavigation span:empty::before
{
	content: '\2794';
	margin: 0 0.5em 0 0.5em;
}



/* Header */

header
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	margin-bottom: 1em;
}

header h1
{
	font-size: var(--groesse4);
	text-transform: uppercase;
	font-weight: 400;
	margin: 0;
}



/* Header Logo-Gestaltung */

header.bk h1 a
{
	display: inline-flex;
}

header.bk h1 a:after
{
	content: '\202F.\202Fnet';
	margin-top: 0.75em;
}

header.bk h1 span:nth-child(1)
{
	margin-top: 0.75em;
}

header.bk h1 span:nth-child(2)
{
	margin-top: 1.50em;
}

header.bk h1 span:nth-child(3)
{
	margin-left: -1em;

}

header.bk h1 span:nth-child(4)
{
	margin-top: 0.75em;
}



/* Anzeige-Banner */

a.anzeige img
{
	max-height: 5vmax;
	filter: grayscale(1) brightness(1.1);
}

a.anzeige img:hover
{
	transform: scale(1.05);
	filter: grayscale(0);
}



/* Formularfelder */

.formularFeld
{
	clear: both;
	width: 100%;
	padding: 5px 0px 5px 0px;
	box-sizing: border-box;
}

.formularFeld.links
{
	clear: left;
	width: 50%;
	padding: 5px 10px 5px 0px;
	float: left;
}

.formularFeld.rechts
{
	clear: right;
	width: 50%;
	padding: 5px 0px 5px 10px;
	float: left;
}

.formularFeld.mittig
{
	clear: none;
	padding: 5px 10px 5px 10px;
	float: left;
}

.formularFeld.breite75
{
	width: 75%;
}

.formularFeld.breite50
{
	width: 50%;
}

.formularFeld.breite33
{
	width: 33.33%;
}

.formularFeld.breite25
{
	width: 25%;
}

.formularFeld input, .formularFeld textarea, .formularFeld select
{
	width: 100%;
}

.formularFeld>.formularFeld
{
	padding-top: 0px;
	padding-bottom: 0px;
}



/* Suchfelder */

form.suchfeld
{
	display: flex;
	background-color: var(--farbe2);
	gap: 0.25em; /* Für SEO sollten zwischen Elementen etwas Platz gelassen werden */
}

form.suchfeld input
{
	padding: 0.4em 0.4em 0.3em 0.4em;
}

form.suchfeld input[type="submit"]
{
	color: var(--farbe3);
	min-width: inherit;
	background-color: transparent;
	padding-top: 0.2em;
	padding-right: 0.6em;
}

form.suchfeld input[type="text"]
{
	width: 10em;
}



/* Zusatztext für Sumas */


article.zusatztext
{
	margin: 3em 0 3em 0;
	padding: 3em 0 0 0;

	border-style: solid;
	border-width: 1px 0 0 0;
}

article.zusatztext span
{
	display: block;
	columns: 200px 4;
	column-gap: 1em;
	hyphens: auto;
	text-align: justify;
}

article.zusatztext a.vorwaerts:after
{
	content: '\2192';
	margin-left: 0.5em;
}

article.zusatztext a.zurueck:before
{
	content: '\2190';
	margin-right: 0.5em;
}

article.zusatztext h1, article.zusatztext h2
{
	font-size: var(--groesse1);
	text-align: left;
}

article.zusatztext figure
{
	margin: 2em 0 2em 0;
	text-align: center;
	hyphens: none;
}

article.zusatztext img
{
	max-height: 10em;
	filter: grayscale(1) brightness(0.9);
}



/* Admin-Tool bei Arbeiten */

iframe.adminTool
{
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin: 0em 0.5em 0 0;
	padding: 0;
	border-radius: 0.8em;
	border-width: 0;
}



/* Großer Text */

span.grosserText
{
	display: block;
	text-align: center;
	font-size: var(--groesse2);
	line-height: 1.2em;
	margin-bottom: 3em;
}



/* ---------------- */
/* Navigation unten */
/* ---------------- */

footer
{
	margin-top: 3em;
	padding-top: 3em;
	border-top: 1px solid var(--farbe1);
	text-align: center;
}

/* Bannerliste unten */

footer div.bannerliste
{
	display: flex;
	justify-content: center;
	gap: 2em;
	margin: 2em 0 2em 0;
}

footer div.bannerliste img
{
	max-height: 40px;
}



/* Logo Text */

a.logoText
{
	font-weight: bold;
}



/* Popup Hinweis */

#popupHinweis
{
	text-align: center;
	background-color: rgba(255, 200, 200, 1);
	padding: 2em;
	margin-bottom: 2em;
}



/* --------------- */
/* Navigation oben */
/* --------------- */

nav
{
	font-size: var(--groesse3);
	margin-bottom: 2em;
	background-color: var(--farbe3);
}

nav ul
{
	display: flex;
	flex-wrap: wrap;
	column-gap: 1em;
}

nav li
{
	display: flex;
	column-gap: 1em;
	white-space: nowrap;
	align-items: center;
}

nav li.zwischenraum
{
	flex-grow: 1;
}

nav li.aktiv a
{
    text-decoration-line: underline;
    text-underline-offset: 0.23em;
	text-decoration-thickness: 0.13em;
	text-decoration-color: var(--farbe3);
}

nav a.socialnetwork[data-icon]:before
{
	display: block;
	margin-top: -0.2em;
	font-weight: 600;
}

nav.bk
{
	font-size: var(--groesse2);
	margin-bottom: 3em;
	border-style: solid;
	border-width: 1px 0 1px 0;
	padding: 0.4em 0 0.4em 0;
}



/* Untermenü */

div.navUntermenue
{
	display: flex;
	margin: -1em 0 2.5em 0;
	font-size: var(--groesse3);
	flex-wrap: wrap;
	gap: 1em;
}

div.navUntermenue a
{
	color: var(--farbe1);
	opacity: 0.25;
}

div.navUntermenue a.aktiv
{
	color: var(--farbe1);
    text-decoration-line: underline;
    text-underline-offset: 0.23em;
	text-decoration-thickness: 0.13em;
	text-decoration-color: var(--farbe3);
	opacity: 1;
}



/* Trenner */

span.trenner:before
{
	content: '|';
	opacity: 0.2;
	margin: 0 1em 0 1em;
}



/* Link-Button */

.button, .button2
{
	display: inline-block;
	background-color: var(--farbe1);
	color: var(--farbe2);
	padding: 0.75em 1em 0.75em 1em;
}

a.button:hover, a.button2:hover
{
	background-color: var(--farbe1);
	text-decoration: none;
	color: var(--farbe2);
}

.button2
{
	font-size: var(--groesse2);
}

span.button
{
	opacity: 0.5;
}







/* Icon-Buttons */

div.iconListe
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	text-align: center;	
}

div.iconListe > *
{
	margin: 0 2em 3em 2em;
}

div.iconListe > span.zeilenumbruch
{
	width: 100%;
	margin: 0;
}

div.iconListe > a[data-icon]:before
{
	display: block;
	margin: 0 0 0.5em 0;
	font-size: var(--groesse3);
}

div.iconListe span.opak
{
	opacity:0.25;
}

div.iconListe span.wichtig
{
	color: rgba(255, 0, 0);
}



/* Fortschrittsbalken */

div.progress-bar
{
	height: 3em;
	background-color: rgba(0, 0, 0, 0.1);
	align-items: stretch;
}

div.progress
{
	height: 3em;
	width: 0; /* Startbreite des Balkens */
	background-color: var(--farbe1);
	animation: grow 5s linear forwards; /* Verwende die "grow" Animation */
}

div.progress-text
{
	position: absolute;
	padding: 1em;
	line-height: 1em;
	color: white;
}

@keyframes grow
{
	to
	{
		width: 100%; /* Maximale Breite erreichen, aber durch max-width im HTML beschränkt */
	}
}


/* Künstler-Teaser */

div.gridTeaserKuenstler
{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-template-rows: fit-content;
	grid-gap: 4em;
}

div.gridTeaserKuenstler article
{
	display: flex;
	flex-direction: column;
	align-self: center;
	gap: 1em;
	text-align: center;
}

div.gridTeaserKuenstler article:hover
{
	transform: scale(1.05);
}

div.gridTeaserKuenstler article:nth-child(1),
div.gridTeaserKuenstler article:nth-child(8)
{
	grid-column: auto / span 2;
	grid-row: auto / span 2;
}

div.gridTeaserKuenstler img
{
	max-height: 8em;
	width: 100%;
	object-fit: contain;
	object-position: center;

	width: 100%;
	height: 100%;
	margin-bottom: 0em;
	/*filter:grayscale(1) brightness(1.1);*/
}


div.gridTeaserKuenstler article:nth-child(1) img,
div.gridTeaserKuenstler article:nth-child(8) img
{
	max-height: 25em;
}


div.gridTeaserKuenstler h2
{
	font-weight: 400;
	margin: 0 0 0 0;
}

div.gridTeaserKuenstler h2, a.ort
{
	font-size: var(--groesse2);
	text-transform: uppercase;	
}

div.gridTeaserKuenstler a.ort
{
	font-weight: 200;
}



/* Arbeiten-Teaser */

div.gridTeaserKunstwerk
{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-template-rows: fit-content;
	grid-gap: 6em 2em;
	text-align: center;
	margin: 6em 0 6em 0;
}

div.gridTeaserKunstwerk article:hover
{
	transform: scale(1.05);
}


div.gridTeaserKunstwerk img
{
	object-fit: contain;
	object-position: center;
	height: 15em;
	width: 80%;
	padding: 0 0 1em 0;
}

div.gridTeaserKunstwerk *
{
	font-size: var(--groesse1) !important;
}

div.gridTeaserKunstwerk a, div.gridTeaserKunstwerk i
{
	display: block;
}




/* Termine-Teaser */

div.gridTeaserTermin
{
	display: grid;
	grid-template-columns: repeat(4,1fr);
	grid-template-rows: fit-content;
	grid-gap: 6em 2em;
}

div.gridTeaserTermin article
{
	text-align: center;
	text-transform: uppercase;	
}

div.gridTeaserTermin article:hover
{
	transform: scale(1.05);
}

div.gridTeaserTermin article:hover img
{
	filter: none;
}

div.gridTeaserTermin img
{
	display: block;
	height: 10em;
	width: calc(100%);
	object-fit: contain;
	object-position: center;
	filter: grayscale(1) brightness(1.1);
	margin: 0 0 2em 0;
}

div.gridTeaserTermin h1
{
	margin: 2em 0 1em 0;
	text-align: center;
	font-size: var(--groesse1);
	font-weight: 600;
}



/* Teaser-Suche */

div.suche_navigation
{
	display: flex;
	justify-content: right;
	gap: 2em;
	margin-top: 4em;
	font-size: var(--groesse2);
}



/* Informiert sein */

#informiertsein
{
	margin: 3em 0 3em 0;
	padding: 3em 0 0 0;
	border-style: solid;
	border-width: 1px 0 0 0;
	
	display: flex;	
	gap: 2em;
	align-items: center;
}

#informiertsein #text
{
	font-size: var(--groesse2);
	line-height: 1.25em;
}

#informiertsein #icon
{
	flex: none;
	text-align: center;
	background-color: var(--farbe1);
	color: var(--farbe2);
	font-size: var(--groesse4);
	line-height: 1em;
	padding-top: 0.2em;
	width: 1.5em;
	height: 1.3em;
}

#informiertsein #formular
{
	width: 100%;
}



/* Tabellen */

table
{
	width: 100%;
	border-spacing: 0px;
	empty-cells: show;
}

thead th
{
	white-space: pre;
}

tbody tr:nth-of-type(odd)
{
	background-color: var(--farbe2);
}

td, th
{
	padding: 0.75em;
}

td.zelleHinweis
{
	width: 8em;
}

td.zelleIcon
{
	width: 22px;
	font-size: var(--groesse2);
}

td .hinweisfeld
{
	display: inline-block;
	color: var(--farbe2);
	padding: 0.5em;
	text-transform: uppercase;
	color: var(--farbe2);
	text-align: center;
	width: 8em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: pre;
}

td .hinweisfeld.sichtbar
{
	background-color: #46c283;
}

td .hinweisfeld.sichtbar:before
{
	content: 'sichtbar';
}		

td .hinweisfeld.nichtsichtbar
{
	background-color: #999999;
}

td .hinweisfeld.nichtsichtbar:before
{
	content: 'nicht sichtbar';
}

td .hinweisfeld.verfuegbar
{
	background-color: #46c283;
}

td .hinweisfeld.verfuegbar:before
{
	content: 'verfügbar';
}

td .hinweisfeld.nichtverfuegbar
{
	background-color: #999999;
}

td .hinweisfeld.nichtverfuegbar:before
{
	content: 'nicht verfügbar';
}

td .hinweisfeld.verkauft
{
	background-color: #0000ff;
}

td .hinweisfeld.verkauft:before
{
	content: 'verkauft';
}

td .hinweisfeld.unbekannt
{
	background-color: #999999;
}

td .hinweisfeld.unbekannt:before
{
	content: 'unbekannt';
}

tr.ausgegraut
{
	opacity: 0.5;
}

td a
{
	font-weight: bold;
}



/* Icons */
/* https://fontawesome.com/v4/icons/ */

@font-face
{
	font-family: 'FontAwesome';
	src: url('/dateien/fonts/fontawesome-webfont.eot?v=4.7.0');
	src: url('/dateien/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/dateien/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('/dateien/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('/dateien/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('/dateien/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

[data-icon]:before
{
	font-family: 'FontAwesome';
	content: attr(data-icon);
	font-size: 1em;
	font-weight: normal;
	line-height: 1.2em;
	margin-right: 0.5em;
	text-decoration: none !important;
}

a[data-icon]:hover
{
	text-decoration: none;
}

div.icon [data-icon]:before,
td [data-icon]:before,
span#icon[data-icon]:before,
span.pfeile a[data-icon]:before
{
	margin-right: 0;
}

input.buttonIcon
{
	font-family: 'FontAwesome';
}



/* --------------- */
/* Künstler-Seiten */
/* --------------- */

/* Einleitung */

div.praesentation
{
	display: flex;
	flex-direction: column;
	gap: 5em;
}

div.praesentation span.grosserText
{
	text-align: left;
}



/* Arbeit */

span.pfeile > span
{
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	font-size: var(--groesse4);
}

span.pfeile a
{
	/*font-size: calc(var(--groesse4) * 3);*/
	transform: scale(2);
}

span.pfeilOben
{
	left: 1em;
	top: 1em;
	transform: rotate(90deg);
}

span.pfeilLinks
{
	left: 1em;
	top: calc(50% - 0.5em);
}

span.pfeilRechts
{
	right: 1em;
	top: calc(50% - 0.5em);
}

span.pfeile a
{
	color: var(--farbe1);
}


span.grossesBild
{
	display: block;
	text-align: center;
	
	font-size: var(--groesse2);
	line-height: 1.3em;
}

span.grossesBild img
{
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	width: 100vw;
	height: calc(100vh - calc(100vh - 100%)); /* Etwas komplizierter als "100vh" für Safari, da Höhe sonst nicht korrekt */
	object-fit: contain;
	object-position: center;
	color: white;
	padding: 0.5em;
	box-sizing: border-box;
}

span.grossesBild figcaption
{
	margin: 0em 0 3em 0;
}

span.grossesBildPlatzhalter
{
	display: block;
	height: 100vh;
	margin-top: var(--fensterrand);
}



/* Markieren von Text */

::selection
{
   color: var(--farbe2);
   background-color: var(--farbe1);
}



/* Fonts */

@font-face
{
	font-family: 'Josefin Sans';
	font-style: normal;
	font-display: swap;
}

@font-face
{
	font-family: 'Josefin Sans';
	src: local('Josefin Sans Light'), local('JosefinSans-Light'), url('/dateien/fonts/JosefinSans-Light.ttf') format('truetype');
	font-weight: 300;
	font-display: swap;
}

@font-face
{
	font-family: 'Josefin Sans';
	src: local('Josefin Sans Regular'), local('JosefinSans-Regular'), url('/dateien/fonts/JosefinSans-Regular.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
}

@font-face
{
	font-family: 'Josefin Sans';
	src: local('Josefin Sans Bold'), local('JosefinSans-Bold'), url('/dateien/fonts/JosefinSans-Bold.ttf') format('truetype');
	font-weight: 600;
	font-display: swap;
}



/* Screen */


/*@media only screen and (min-width: 991px)
{
	nav
	{
		position: sticky;
		top: 1em;
		z-index: 1;
	}
}*/

@media only screen and (max-width: 991px)
{
	div.gridTeaserKuenstler
	{
		grid-template-columns: repeat(2,1fr);
	}
	
	div.gridTeaserKunstwerk
	{
		grid-template-columns: repeat(3,1fr);
	}

	div.gridTeaserTermin
	{
		grid-template-columns: repeat(3,1fr);
	}

    #informiertsein
	{
		flex-direction: column;
	}
	
	#informiertsein #icon
	{
		display: none;
	}
	
	#informiertsein #text
	{
		text-align: center;
		font-size: var(--groesse3);
	}

	nav li.zwischenraum ~ li, a.folgen
	{
		display: none;
	}
}

@media only screen and (max-width: 480px)
{
	:root
	{
		--fensterrand: 1em;
	}

	div.gridTeaserKunstwerk
	{
		grid-template-columns: 1fr;
	}

	div.gridTeaserTermin
	{
		grid-template-columns: 1fr;
	}

	aside
	{
		flex-direction: column;
	}

	aside div.loginInfo
	{
		width: auto;
	}

	form.suchfeld input[type="text"]
	{
		width: 3.5em;
	}
	
	a.anzeige
	{
		display: none;
	}
}