/* CSS 0.11.012 RC 2025-10-14 TG • © 2025 gswgallery. All rights reserved.  */

:root {
	--gsw-wrapper-max-width: 800px;
	--gsw-margin-body: 5vw;
	
	--gsw-white: hsla(0,100%,100%,1.0);
	--gsw-grey: hsla(0,0%,25%,1.0);
	--gsw-lightgrey: hsla(0,0%,60%,1.0);
	--gsw-ultralightgrey: hsla(0,0%,95%,1.0);
	--gsw-darkgrey: hsla(0,0%,10%,1.0);
	--gsw-red: hsla(0,80%,50%,1.0);
	--gsw-magenta: rgb(221, 0, 221);
	--gsw-blue: hsla(210,100%,40%,1.0);
	--gsw-black: hsla(0,0%,0%,1.0);
	--artist-one-color: hsla(130,20%,60%,1.0);
	--artist-two-color: var(--gsw-grey, pink);
	--artist-three-color: var(--gsw-grey, pink);
	--gsw-shadow-color: hsla(0,0%,0%,0.2);
	--gsw-shadow-blur: 8px;
	--gsw-border-radius: 4px;
	--gsw-distant-between-images: 24px;
	
	--gsw-color-text: var(--gsw-lightgrey);
	
	--gsw-font-main-family: Roboto;
	--gsw-font-main-weight: 400;
	--gsw-font-main-weight-bold: 700;
	--gsw-font-main-style: normal;
	--gsw-font-main-size: 16px;
	--gsw-line-height: 1.3;


	--gsw-font-menu-family: Roboto;
	--gsw-font-menu-weight: 400;
	--gsw-font-menu-style: normal;
	--gsw-font-menu-size: 16px;

	--gsw-font-logo-family: Helvetica;

	--gsw-font-link-family: Roboto;
	--gsw-font-link-weight: 100;
	--gsw-font-link-style: italic;

	--gsw-font-cite-family: Garamond;
	--gsw-font-cite-size: 120%;
	--gsw-font-cite-style: italic;
	
	--gsw-nav-icon-size: 2.5em;
	--gsw-nav-icon-color: var(--gsw-red);
}

/* roboto-100 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 100;
	src: url('../fonts/roboto-v47-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-100italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 100;
	src: url('../fonts/roboto-v47-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/roboto-v47-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 400;
	src: url('../fonts/roboto-v47-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/roboto-v47-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 700;
	src: url('../fonts/roboto-v47-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-900 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 900;
	src: url('../fonts/roboto-v47-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-900italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 900;
	src: url('../fonts/roboto-v47-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
* {
	margin: 0px;
	box-sizing: border-box;
}	
.gsw-color-black {
		color: var(--gsw-black, pink)!important;
}
.gsw-color-red {
		color: var(--gsw-red, pink)!important;
}
.gsw-color-lightgrey {
		color: var(--gsw-lightgrey, pink)!important;
}
.gsw-color-grey {
		color: var(--gsw-grey, pink)!important;
}
.gsw-color-white {
		color: var(--gsw-white, pink)!important;
}
.gsw-color-text {
		color: var(--gsw-lightgrey, pink)!important;
}
.gsw-background-color-red {
		background-color: var(--gsw-red, pink)!important;
}
.gsw-background-color-lightgrey {
		background-color: var(--gsw-lightgrey, pink)!important;
}
.gsw-background-color-blue {
		background-color: var(--gsw-blue, pink)!important;
}
.gsw-background-color-campain-marta {
		background-color: var(--gsw-magenta, pink)!important;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	font-family: var(--gsw-font-main-family, sans-serif);
	font-weight: var(--gsw-font-main-weight, 400);
	font-style: var(--gsw-font-main-style, normal);
	font-size: var(--gsw-font-main-size, 16px);
	background-color: var(--gsw-white, pink);
	margin-top: 20px; /* bestimmt den Randabstand: 2Opx oben */
	margin-left: var(--gsw-margin-body, 2vw); /* bestimmt den Randabstand links: 2vw (= 2 % von der Viewport-Breite) */
	margin-right: var(--gsw-margin-body, 2vw); /* bestimmt den Randabstand links: 2vw (= 2 % von der Viewport-Breite) */
	margin-bottom: 80px; /* bestimmt den Randabstand: 100px unten) */
	/* padding: 0 1em; */
	border: 0px;
}

div {
	display: block;
	color: var(--gsw-lightgrey, grey);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--gsw-font-main-family, sans-serif);
	font-weight: var(--gsw-font-main-weight-bold);
	font-style: var(--gsw-font-main-style);
	font-size: var(--gsw-font-main-size, 16px);
	color: var(--gsw-red, pink);
}

p {
	font-family: var(--gsw-font-main-family, sans-serif);
	font-weight: var(--gsw-font-main-weight);
	font-style: var(--gsw-font-main-style);
	font-size: var(--gsw-font-main-size, 16px);
	color: var(--gsw-color-text, pink);
	margin-top: 0.4em;
	line-height: var(--gsw-line-height, 1.4);
}

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

.debug {
	font-size: 12px;
	color: blueviolet;
	margin-top: 1em;
	margin-bottom: 2em;
}

.place-holder {
	z-index: 2;
	left: 0;
	background-color: var(--gsw-red, pink);
	font-family: 'Courier New';
	color: var(--gsw-white, pink);
	margin: 1px;
	padding: 0 5px 0 5px;
	text-align: center;
	border-radius: var(--gsw-border-radius, 4px);
	font-size: 100%;
	opacity: 0.50;
}

.dropdown-container {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.dropdown-menu {
	position: absolute;
	min-width: 150px;
	top: 1em;
	left: 1em;
	border-radius: var(--gsw-border-radius, 4px);
	background-color: var(--gsw-white, pink);
	opacity: 0.90;
	text-decoration: none;
	padding: 10px;
	box-shadow: 0 0 var(--gsw-shadow-blur) var(--gsw-shadow-color, pink);
	cursor: pointer;
	z-index: 1000;
}

.dropdown-menu.hidden {
	display: none;
}

.dropdown-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dropdown-menu li {
	margin: 5px 0;
}

.dropdown-menu a {
	text-decoration: none;
	color: var(--gsw-red, pink);
}

img {
	object-fit: contain;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
	border-radius: var(--gsw-border-radius, 4px);
}

figure {
	margin-top: 0em;
}

figcaption {
	text-align: center;
	font-size: 80%;
	margin: 6px;
	margin-bottom: var(--gsw-distant-between-images, 12px);
	color: var(--artist-one-color, pink);
}

.gsw-figcaption {
	text-align: center;
	font-size: 80%;
	margin: 0.5em;
	margin-bottom: var(--gsw-distant-between-images, 12px);
	color: var(--artist-one-color, pink);
}

.badge {
	position: absolute;
	z-index: 2;
	left: 0;
	color: var(--gsw-white, pink);
	background-color: var(--gsw-blue, pink);
	font-family: 'Courier New';
	margin: 0;
	padding: 0 3px 0 3px;
	text-align: center;
	border-radius: var(--gsw-border-radius, 4px);
	font-size: 12px;
	opacity: 0.90;
}

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

.pt {
	color: var(--gsw-red, pink);
}

cite {
	display: inline;
	margin-left: 0em;
	font-family: var(--gsw-font-cite-family, italic);
	font-style: var(--gsw-font-cite-style, italic);
	font-size: var(--gsw-font-cite-size, 100%);
	line-height: 1.0;
	font-weight: 200;
	color: var(--artist-one-color, pink);
	white-space: pre-line;
}

button {
	color: var(--gsw-lightgrey, pink);
	background-color: var(--gsw-ultralightgrey, pink);
	border: none;
	border-radius: var(--gsw-border-radius, 2px);
	padding: 2px 8px 4px 8px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 0px;
	cursor: pointer;
}

li > a:hover {
	background-color: var(--gsw-lightgrey, pink);
}

div.logo {
	position: fixed;
	right: 100px;
	top: 10px;
	z-index: 9;
	width: 22vw;
	height: 5.5vw;
	text-align: center;
	color: var(--gsw-black, pink);
	background-color: var(--gsw-white, pink);
	opacity: 0.95;
	font-size: 4vw;
}

.btn {
	border: none;
	cursor: pointer;
}
.btn:hover {
	background-color:var(--gsw-blue, pink);	
}

div.goback {
	position: fixed;
	left: 12px;
	bottom: 2%;
	z-index: 99;
	width: auto;
	height: auto;
	text-align: center;
	opacity: 0.80;
}

div.gotop {
	position: fixed;
	right: 12px;
	bottom: 2%;
	z-index: 99;
	width: auto;
	height: auto;
	opacity: 0.80;
}

.logo-align {
	font-family: var(--gsw-font-logo-family, sans-serif);
	letter-spacing: -0.03em;
	margin: 0;
	position: absolute;
	display: flex;
	gap: 0;
	top: 10px;
	right: 0;
	margin-top:0.25em;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.tooltip {
	position: relative;
	display: inline-block;
}

.tooltip .tooltiptext {
	visibility: hidden;
	font-size: 120%;
	width: 12em;
	margin-left: -6em;
	background-color: var(--gsw-lightgrey, pink);
	color: var(--gsw-white, pink);
	text-align: center;
	border-radius: var(--gsw-border-radius, 4px);
	/* padding: 5px 0; */
	padding: 1em;
	position: absolute;
	z-index: 1;
	bottom: 2em;
	left: 50%;
	opacity: 0.00;
	transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
	transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 0.80;
}