/* CSS Reset -------------------------------------------------------------------------- */

/* 1. Box-Sizing für alle Elemente auf border-box setzen */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0; /* Setzt Standardabstände auf null */
  padding: 0; /* Innenabstände */
}

/* 2. Standard-Abstände für das Dokument entfernen und Text-Rendering optimieren */
html, body {
  height: 100%;
  font-size: 100%;
  -webkit-text-size-adjust: 100%; /* Verhindert, dass einige mobile Browser beim Drehen des Smartphones ins Querformat die Schriftgröße automatisch und unkontrolliert vergrößern. */
}

html {
	scroll-behavior: smooth;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 3. Responsive Bilder und Medien */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 4. Vererbung von Schriftarten für Formularelemente erzwingen */
input, button, textarea, select {
  font: inherit;
}

/* 5. Lten-Formate zurücksetzen (optional, entfernt Standard-Punkte) */
ol, ul {
  list-style: none;
}

/* 6. Standard-Unterstreichung bei Links entfernen */
a {
  text-decoration: none; /* Entfernt den standardmäßigen Unterstrich bei Links. */
  color: inherit; /* Verhindert, dass der Browser Links automatisch blau (und besuchte Links lila) einfärbt. */
}

@font-face {
	font-family: "Cedarville Cursive";
	src: url("../fonts/CedarvilleCursive-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Amatic SC";
	src: url("../fonts/AmaticSC-Bold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Lora";
	src: url("../fonts/Lora-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Lora";
	src: url("../fonts/Lora-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


/* Basic -------------------------------------------------------------------------------------------- */

	/* Deaktiviert alle Animationen und Übergänge (Transitions) auf der gesamten Webseite, solange die Seite lädt. */
		body.preload *, body.preload *:before, body.preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

	body {
		background: #1d242a; /* #c9bfb7 vorher */
		color: #000000; /* Textfarbe */
		font-family: "Lora", Helvetica, sans-serif;
		font-size: 15pt;
		font-weight: 400;
		letter-spacing: 0.075em; /* Der Abstand zwischen den einzelnen Buchstaben wird leicht erhöht (um 7,5% der aktuellen Schriftgröße). */
		line-height: 1.5em; /* Zeilenabstand */
	}
		/* media screen: Diese Regel gilt nur für die Anzeige auf Bildschirmen (Monitoren, Laptops, Tablets, Smartphones), nicht jedoch für den Ausdruck der Seite. */
		
		@media screen and (max-width: 1600px) {
			body {
				font-size: 13pt;}
		}

		@media screen and (max-width: 1280px) {
			body {
				font-size: 12pt;
			}
		}

		@media screen and (max-width: 720px) {
			body {
				font-size: 11pt;
				letter-spacing: 0.0375em;
			}
		}

	a {
		transition: color 0.2s ease, border-bottom-color 0.2s ease;
	}

		a:hover {
			color: #3a0101;
		}

	/* Aussehen für fettgedruckten Text fest. Er spricht sowohl das moderne <strong>-Element (wichtiger Text) als auch das klassische <b>-Element (optisch fetter Text) an. */
	strong, b {
		color: #fff;
		font-weight: 550; /* 550 entspricht halbfett */
	}

	/* kursiv geschriebener Text */
	em, i {
		font-style: italic; /* Italic = CSS Standard für kursiv */
	}

	/* Abstand um Textabstände (oben, rechts, unten. links) */
	p {
		margin: 0 0 2em 0;
	}

	h1, h2, h3, h4, h5, h6 {
		color: #000;
		font-weight: 800;
		letter-spacing: 0.225em;
		line-height: 1em;
		margin: 0 0 1em 0;
	/* 	text-transform: uppercase; Wandelt Text in Großbuchstaben um */
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
		}

	h2 {
		font-size: 1.35em;
		line-height: 1.75em;
	}

		@media screen and (max-width: 720px), screen and (orientation: portrait) {
			h2 {
				font-size: 1.1em;
				line-height: 1.65em;
			}
		}

	h3 {
		font-size: 1.15em;
		line-height: 1.75em;
	}

		@media screen and (max-width: 720px), screen and (orientation: portrait) {
			h3 {
				font-size: 1em;
				line-height: 1.65em;
			}
		}

	h4 {
		font-size: 1em;
		line-height: 1.5em;
	}


	sub {
		font-size: 0.5em;
		position: relative;
		top: -0.5em;
	}

	sup {
		font-size: 0.5em;
		position: relative;
		top: 0.5em;
	}

	/* horizontal rule = horizontale Trennlinie */
	hr {
		border: 0;
		border-bottom: solid 2px #000;
		margin: 3em 0; /* Abstand oben/unten (3-fach) */
	}

	/* eigener Block auf der Webseite; Er sorgt dafür, dass sich Zitate optisch deutlich vom normalen Fließtext abheben, indem sie eingerückt, schräg gestellt und mit einem vertikalen Balken versehen werden. */
	blockquote {
		border-left: solid 4px #000;
		border-right: solid 4px #000;
		font-style: italic;
		margin: 0 0 2em 0;
		padding: 0.5em 0 0.5em 3em;
	}

	/* Für Code-Wörter mitten im normalen Text */
	code {
    	background: #f0f4f9;       /* Das gleiche helle Gemini-Graublau */
    	color: #1f1f1f;            /* Der gleiche schwarze Text */
    	border-radius: 4px;        /* Leicht abgerundet */
    	padding: 2px 6px;          /* Kompakter Innenabstand */
    	font-family: monospace;
    	font-size: 0.9em;
	}

	/* Der äußere Container des Code-Blocks (die Box) */
	pre {
    	background-color: #f0f4f9;       /* Das typische, helle Gemini-Graublau */
   		border: none;                    /* Kein störender Rahmen */
    	border-radius: 12px;             /* Schön weiche, moderne Ecken */
    	padding: 16px 20px;              /* Viel Luft im Block für ein sauberes Design */
    	margin: 24px 0;                  /* Großzügiger Abstand zu Textabsätzen */
    	overflow-x: auto;                /* Scrollbalken, falls eine Zeile zu lang ist */
	}

	/* Die Formatierung des schwarzen Textes im Block */
	pre code {
    	font-family: 'Fira Code', 'Consolas', 'Courier New', monospace; /* Professionelle Entwickler-Schriften */
    	font-size: 14px;                 /* Perfekt lesbare Schriftgröße */
    	line-height: 1.6;                /* Sehr luftiger, angenehmer Zeilenabstand */
    	color: #1f1f1f;                  /* Tiefes Anthrazit/Schwarz für perfekten Kontrast */
    	letter-spacing: normal;          /* Verhindert, dass die Buchstaben auseinandergezogen werden */
    	background: transparent;         /* Löscht den Inline-Hintergrund aus deinem alten Code */
    	padding: 0;                      /* Kein Extra-Padding innerhalb des Textes */
    	margin: 0;                       /* Kein Extra-Margin innerhalb des Textes */
	}

	.align-left {
		text-align: left;
	}

	.align-center {
		text-align: center;
	}

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

	.quote {
		font-style: italic;
		color: #88653e;
		font-size: 1.2em;
		margin: 1em 0;
	}

	.author {
		font-size: 1em;
		color: #a5834f;
		margin: 0.5em 0;
	}

	.separation-line {
		display: block;
		width: 35%;
		height: 100%;
		margin: 3em auto;
		border-top: 2px solid #88653e;
		border-bottom: 2px solid #88653e;
	}

		@media screen and (max-width: 720px), screen and (orientation: portrait) {
			.separation-line {
				width: 66%;
			}
		}

/* Menu --------------------------------------------------------------------------- */

	#page_cpl:before {
			background: rgba(0, 0, 0, 0);
			content: '';
			display: none;
			height: 100%;
			left: 0;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 10001;
		}

	#menu {
		transform: translateX(20em); /* Verstecken des Menüs außerhlab der Website, wenn nicht aktiviert */
		transition: transform 0.5s ease-in-out !important;
		-webkit-overflow-scrolling: touch;
		background: #ffefdb;
		color: #8b7e66;
		height: 100%;
		max-width: 80%;
		overflow-y: auto;
		padding: 3em 2em;
		position: fixed;
		right: 0;
		top: 0;
		width: 20em;
		z-index: 90002;
	}

			#menu ul > li {
				border-top: solid 1px rgba(0, 0, 0, 0.125);
				margin: 0.5em 0 0 0;
				padding: 0.5em 0 0 0;
				font-family: "Amatic SC", sans-serif;
				font-size: 1.5em;
			}

				#menu ul > li:first-child {
					border-top: 0 !important;
					margin-top: 0 !important;
					padding-top: 0 !important;
				}

				#menu ul > li > a {
					border: 0;
					color: inherit;
					display: block; /* Erstellt ein Block Element -> eigene Zeile und volle Breite */
					font-size: 1.0em;
					letter-spacing: 0.5em;
					outline: 0;
					text-decoration: none;
					text-transform: uppercase;
				}

					@media screen and (max-width: 720px), screen and (orientation: portrait) {
						#menu ul > li > a {
							line-height: 2em;
						}
					}

		#menu .closeBtn {
			background-image: url("Images/menu-close-x.svg");
			background-position: 1em 1em;
			background-repeat: no-repeat;
			border: 0;
			cursor: pointer; /* Verwandelt Maus in Pointer Hand */
			display: block;
			height: 3em;
			position: absolute;
			right: 0;
			top: 0;
			width: 3em;
		}

		#menu .closeBtn span {
 			display: none;
		}

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

			#menu {
				padding: 3em 1.5em;
			}

		}

	#page_cpl {
		opacity: 1;
		transition: opacity 0.5s ease-in-out;
	}

	body.menu-visible #page_cpl {
		opacity: 0.35;
	}

	body.menu-visible #page_cpl:before {
		display: block;
	}

	body.menu-visible #menu {
		transform: translateX(0);
	}
	

/* Header ----------------------------------------------------------------------- */

	#header {
		transition: background-color 0.3s ease;
		background-color: rgba(107, 86, 66, 0.2);
		height: 3em;
		left: 0;
		line-height: 3em;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10000;
	}

	body.show-header #header {
		background-color: rgba(107, 86, 66, 0.0);
	}

	body.show-header #header h1 {
		opacity: 1;
		pointer-events: auto;
	}

		#header h1 {
			font-family: "Cedarville Cursive", cursive, sans-serif;
			transition: opacity 0.3s ease;
			height: inherit;
			left: 1.25em;
			line-height: inherit;
			position: absolute;
			top: 0;
			opacity: 0;
			pointer-events: none;
			color: #fff;
			font-size: 1em;
			letter-spacing: 0.3em
		}

			#header h1 a {
				border: 0;
				display: block;
				height: inherit;
				line-height: inherit;
			}

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

					#header h1 a {
						font-size: 0.8em;
					}

				}

		#header nav {
			height: inherit;
			line-height: inherit;
			position: absolute;
			right: 0;
			top: 0;
			font-family: "Amatic SC", sans-serif;
			font-size: 1.5em;
		}

			#header nav > ul {
				list-style: none;
				margin: 0;
				padding: 0;
				white-space: nowrap;
			}

				#header nav > ul > li {
					display: inline-block;
					padding: 0;
				}

					#header nav > ul > li > a {
						border: 0;
						color: #fff;
						display: block;
						font-size: 0.8em;
						letter-spacing: 0.225em;
						padding: 0 1.5em;
						text-transform: uppercase;
					}

						#header nav > ul > li > a.menuIcon {
							outline: 0;
							position: relative;
						}

							#header nav > ul > li > a.menuIcon::after {
								background-image: url("Images/menu-burger.svg");
								background-position: center;
								background-repeat: no-repeat;
								content: '';
								display: inline-block;
								height: 1em;
								vertical-align: middle;
								right: 4em;
								width: 1em;
								margin: 0 1em 0 1em;
								background-size: contain;
							}


						@media screen and (max-width: 720px), screen and (orientation: portrait) {
							#header nav > ul > li > a {
								padding: 0 0 0 1.5em;
							}
						}

					#header nav > ul > li:first-child {
						margin-left: 0;
					}



/* Starter ---------------------------------------------------------- */
	#starter {
		display: flex; /* Aktiviert das flexible Box-Modell für den Start. Es macht den Starter zu einem Container, der seine inneren Elemente spielend leicht anordnen kann. */
		flex-direction: column; /* Stapelt die Elemente innerhalb des Starters untereinander */
		justify-content: center; /* Richtet alle Texte und Buttons zusätzlich hotizontal mittig aus */
		cursor: default;
		height: 100vh; /* vh = Viewport Height in % Body nimmt exakt 100% der Bildschirmhöhe ein */
		min-height: 5em;
		overflow: hidden;
		text-align: center;
		font-family: "Cedarville Cursive", cursive, sans-serif;
		font-size: 3em;
		line-height: 1.0em;
		position: relative;
		height: 100svh;
	}

	#starter h2 {
		color: #292f54;
		font-size: 2em;
		padding: 0.5em 0 5em 0;
		/* Verschieb Text nach unten*/
		transform: translateY(2em);
		}

	#starter .more.scrolly {
		position: absolute;
		left: 50%;
		bottom: 1em;
		transform: translateX(-50%);

		display: inline-flex;
		flex-direction: column;
		align-items: center;

		width: fit-content;
		margin: 0;

		border: 0;
		cursor: pointer;
		color: #000;
		text-align: center;
		gap: 0;
	}

	#starter .more.scrolly::after {
		content: '';
		display: block;
		width: 2em;
		height: 2em;
		background-image: url("Images/three_cursive_down_arrows_less_curved.svg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}

		@media screen and (max-width: 720px), screen and (orientation: portrait) {
			#starter h2 {
				font-size: 1em;
			}
		}

	#starter2 {
		display: flex; /* Aktiviert das flexible Box-Modell für den Start. Es macht den Starter zu einem Container, der seine inneren Elemente spielend leicht anordnen kann. */
		flex-direction: column; /* Stapelt die Elemente innerhalb des Starters untereinander */
		justify-content: center; /* Richtet alle Texte und Buttons zusätzlich hotizontal mittig aus */
		cursor: default;
		height: 140vh; /* vh = Viewport Height in % Body nimmt exakt 100% der Bildschirmhöhe ein */
		min-height: 5em;
		overflow: hidden;
		text-align: center;
		font-family: "Cedarville Cursive", cursive, sans-serif;
		font-size: 3em;
		line-height: 1.0em;
		background-image: url("../Images/background_gallery.png");
		background-attachment: scroll; /* Sorgt dafür, dass das Bild mitscrollt (alternativ fixed) */
		background-position: center -180px;
		background-repeat: no-repeat;
		background-size: 140%;
		padding-top: 0;
	}

	#starter2 h2{
		transform: translateY(-160px);
	}
	
	#starter3 {
		background-image: url("../Images/background_3Ddesign2.png");
		background-attachment: scroll; /* Sorgt dafür, dass das Bild mitscrollt (alternativ fixed) */
		background-position: center -140px;
		background-repeat: no-repeat;
		background-size: 140%;
		display: flex; /* Aktiviert das flexible Box-Modell für den Start. Es macht den Starter zu einem Container, der seine inneren Elemente spielend leicht anordnen kann. */
		flex-direction: column; /* Stapelt die Elemente innerhalb des Starters untereinander */
		justify-content: center; /* Richtet alle Texte und Buttons zusätzlich hotizontal mittig aus */
		cursor: default;
		height: 100vh; /* vh = Viewport Height in % Body nimmt exakt 100% der Bildschirmhöhe ein */
		min-height: 5em;
		overflow: hidden;
		text-align: center;
		font-family: "Cedarville Cursive", cursive, sans-serif;
		font-size: 3em;
		line-height: 1.0em;
	}

	#starter3 h2{
		transform: translateY(+20px);
	}

	#starter4 {
		display: flex; /* Aktiviert das flexible Box-Modell für den Start. Es macht den Starter zu einem Container, der seine inneren Elemente spielend leicht anordnen kann. */
		flex-direction: column; /* Stapelt die Elemente innerhalb des Starters untereinander */
		justify-content: center; /* Richtet alle Texte und Buttons zusätzlich hotizontal mittig aus */
		cursor: default;
		height: 33vh; /* vh = Viewport Height in % Body nimmt exakt 100% der Bildschirmhöhe ein */
		min-height: 5em;
		overflow: hidden;
		text-align: center;
		font-family: "Cedarville Cursive", cursive, sans-serif;
		font-size: 3em;
		line-height: 1.0em;
		transform: translateY(+1.1em);
	}

	#starterBasic {
		display: flex; /* Aktiviert das flexible Box-Modell für den Start. Es macht den Starter zu einem Container, der seine inneren Elemente spielend leicht anordnen kann. */
		flex-direction: column; /* Stapelt die Elemente innerhalb des Starters untereinander */
		justify-content: center; /* Richtet alle Texte und Buttons zusätzlich hotizontal mittig aus */
		cursor: default;
		height: 4.7em; /* vh = Viewport Height in % Body nimmt exakt 100% der Bildschirmhöhe ein */
		min-height: 3em;
		overflow: hidden;
		text-align: center;
		font-family: "Cedarville Cursive", cursive, sans-serif;
		font-size: 3em;
		line-height: 1.0em;
		background-color: #ebd6cd;
		margin-bottom: 0em;
		padding-bottom: 0em;
	}

	#starterBasic h2{
		padding-top: 2em;
	}
	

/* Landing --------------------------------------------------- */


	body.landingpage #page_cpl {
		background-image: url("../Images/background_starter.png");
		background-attachment: scroll; /* Sorgt dafür, dass das Bild mitscrollt (alternativ fixed) */
		background-position: center 40%;
		background-repeat: no-repeat;
		background-size: cover;
		padding-top: 0;
	}
	

	body.landingpage #footer {
		background-color: #15131b;
	}

	body.mobile.landingpage #page_cpl {
		background: none;
		background-color: #f8f0e6;
	}


	body.mobile.landingpage #footer {
		background-color: #1a1722;
	}


	body.chapter2 #page_cpl {
		padding-top: 0;
	}

	body.chapter3 #page_cpl {
		background-color: #ebd6cd;
		background-attachment: scroll; /* Sorgt dafür, dass das Bild mitscrollt (alternativ fixed) */
		background-repeat: no-repeat;
		background-size: 80%;
		padding-top: 0;
	}

/* Section ---------------------------------------------------------------- */

	#section1 {
		background-color: #ffcf94;
		color: #3a0101; /* former: #8f3545 */
		text-align: center;
		padding-bottom: 4em;
	}

	#section1 h2 {
		font-family: "Cedarville Cursive", Helvetica, sans-serif;
		font-size: 2em;
	}
	
	#introText {
		max-width: 135vh;
		margin: 0 auto;
	}

	#aufebtn {
		display: block;
		font-size: 2em;
		font-family: "Cedarville Cursive", Helvetica, sans-serif;
		margin: 2em 0 2em 0;
		padding-top: 0.5em;
	}

	#aufebtn::before {
		content: '';
		display: block;
		width: 1.8em;
		height: 1.8em;
		margin: 0.5em auto 0 auto;
		background-image: url("Images/three_cursive_down_arrows_less_curved.svg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		transform: rotate(180deg);
	}

		@media screen and (max-width: 720px), screen and (orientation: portrait) {
			#aufebtn {
				font-size: 1.5em;
			}
		}

	#gallery-link {
		background-color:#21060b;
		border-color: #31060e;
		border-style: solid;
		border-radius: 2em;
		max-width: 10em;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 2em;
		font-family: "Cedarville Cursive", Helvetica, sans-serif;
		color: #f7f3ec;
		margin: 2em auto;
		padding: 1.3em 0 1.3em 0;
		box-shadow: 0.2em 0.3em 0.3em rgba(48, 33, 33, 0.8);
	}

	#gallery-link:hover {
		background: none;
		background-color: #f5efeb;
		color: #21060b;
		transform: translateY(-0.08em);
	}

	#section1.design2 {
		background-image: url("../Images/Stuck.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		height: 8em;
		background-color: #ecbd97;
		color: #3a0101; /* former: #8f3545 */
		text-align: center;
		padding-top: 0;
		padding-bottom: 0;
	}

	#section1.design3 {
		display: flex;
		height: auto;
		background-color: #f7f1ed;
		color: #3a0101; /* former: #8f3545 */
		text-align: center;
		align-items: flex-start;
		justify-content: center;
		margin: 0 auto;
		padding: 6em 6em;
		box-sizing: border-box;
	}

	#section1.designArt {
		display: flex;
		height: auto;
		background-color: #f7f1ed;
		color: #3a0101; /* former: #8f3545 */
		text-align: center;
		align-items: flex-start;
		justify-content: center;
		margin: 0 auto;
		padding: 6em 6em;
		box-sizing: border-box;
	}

	.artwork-image,
	.about-image,
	.about-texts {
		flex: 1;
	}

	.artwork-image,
	.about-image {
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.artwork-image img,
	.about-image img {
		max-width: 100%;
		max-height: 100vh;
		height: auto;
		width: auto;
		margin: 0 auto;
		object-fit: contain;
	}

	.about-image img {
		transform: scaleX(-1);
	}

	.lang-btn {
		background-color: transparent;
		border: 1px solid #222;
		border-radius: 999px;
		padding: 0.6rem 1.2rem;
		cursor: pointer;
		font-family: inherit;
		font-size: 1rem;
		transition: 0.2s ease;
	}

	.lang-btn:hover {
		background-color: #222;
		color: #fff;
	}

	.about-texts {
		width: 100%;
		max-width: 800px;
		padding: 0 6em;
		text-align: left;
		font-size: 0.8em;
		align-self: flex-start;
		hyphens: auto;
		overflow-wrap: break-word;
		word-break: normal;
	}

	.about-text {
		display: none;
		hyphens: auto;
		overflow-wrap: break-word;
		word-break: normal;
	}

	.about-text.active {
		display: block;
	}


	

/* Gallery Section ------------------------------------------ */
	
	.gallery-cpl {
		position: relative;
		min-height: 100svh;

		background-image: url("../Images/canvas_museum.png");
		background-repeat: no-repeat;
		background-position: center -220px;
		background-size: 115%;
	}

	.gallery-container {
		position: relative;
		display: grid;
		grid-template-columns: 4em minmax(0, 1fr) 4em;
		align-items: center;
		justify-items: center;

		width: min(78vw, 950px);
		margin: 0 auto;
		padding-top: 100px;
		padding-bottom: 0.5em;

		gap: 0.5em;
		transform: none;
	}

	.gallery-container::before {
		content: "";
		position: absolute;

		left: 65%;
		top: 1.2em;

		transform: translateX(-50%);

		width: 9em;
		aspect-ratio: 16 / 6;

		background-image: url("../Images/click_arrow.PNG");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;

		opacity: 0.3;

		z-index: 5;
		pointer-events: none;
	}

	.gallery-image-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;

		width: 100%;
		min-width: 0;
	}

	#gallery-image-link {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 100%;
		height: 55vh;

		text-decoration: none;
		touch-action: pan-y;
		user-select: none;
	}

	#gallery-image {
		max-width: 100%;
		max-height: 100%;

		width: auto;
		height: auto;

		object-fit: contain;
		border-radius: 2px;
		box-shadow: 0 1em 3em rgba(0, 0, 0, 0.5);

		-webkit-user-drag: none;
		user-select: none;
	}

	#gallery-caption-main {
		font-family: "Cedarville Cursive", cursive, sans-serif;
		margin-top: 80px;
		font-size: 2em;
		letter-spacing: 0.05em;
	}

	.gallery-btn {
		font-family: "Cedarville Cursive", cursive, sans-serif;
		background: none;
		border: none;
		color: #81736d;
		font-size: 2em;
		cursor: pointer;
		line-height: 1;
		transition: color 0.3s ease, transform 0.3s ease;

		padding: 0;
		margin: 0;
	}

	.gallery-btn.prev {
		justify-self: end;
	}

	.gallery-btn.next {
		justify-self: start;
	}

	.gallery-btn:hover {
		color: #8b0000;
		transform: scale(1.08);
	}

	#details_all {
		text-align: center;
		transform: translateY(-10px);
	}

	#details {
		/* background-color: #fcefe4b9; */
		background-size: cover;
		margin-top: -4em;
		margin-left: auto;
		margin-right: auto;
		padding-top: 0;
		padding-bottom: 10em;
		font-family: Helvetica, sans-serif;
		font-size: 1em;
		letter-spacing: 0.05em;
		line-height: 0.4em;
		width: 90%;
		height: 3em;
		display: flex;
		justify-content: center;
		text-align: center;
		gap: 1em;
	}

	#return-btn {
		background-color: #e2bf9f;
		color: #000000;
		font-size: 1em;
		font-family: "Cedarville Cursive", Helvetica, sans-serif;
		padding: 0 0 0 1em;
	}

	#return-btn p{
		margin-bottom: 0;
	}

	#section2.design2 {
		height: 10em;
		background-color: #ebd8c8;
		color: #3a0101; /* former: #8f3545 */
		text-align: center;
		line-height: 0.5em;
		padding-top: 1em;
		max-width: 80%;
	}

	#section2 h2 {
		font-family: "Cedarville Cursive", Helvetica, sans-serif;
		font-size: 1.5em;
		letter-spacing: 0.05em;
	}

/* Basic Layout --------------------------------------------------- */

	.basic {
		min-height: 100vh;
		padding: 12em 0 9em 0;
		text-align: center;
		color: #b1a59b;
	}

	.basic h2 {
		font-family: "Cedarville Cursive", Helvetica, sans-serif;
		font-size: 3em;
		letter-spacing: 0.05em;
		color: #b1a59b;
	}

	#imprint {
		background-color: #b1a59b;
		background-size: cover;
		padding-top: 7em;
		color: #1d242a;
	}

	#imprint h2 {
		font-family: Helvetica, sans-serif;
		font-size: 1.5em;
		letter-spacing: 0.05em;
		color: #1d242a;
	}

	#imprint .content {
		font-family: Helvetica, sans-serif;
		font-size: 1em;
		letter-spacing: 0.05em;
		line-height: 1.5em;
		margin: 0 auto;
		max-width: 800px;
		hyphens: auto;
		overflow-wrap: break-word;
		word-break: normal;
	}

	#imprint .content h3 {
		color: #1d242a;
		padding-top: 1em;
	}

/* Footer --------------------------------------------------- */
	#footer {
		padding: 2em 0 1em 0 ;
		background-color: #1d242a;
		text-align: center;
		color: #fff;
	}
	
	.icons {
		display: flex;
		justify-content: center;
		gap: 0.5em;
		margin: 0 0 0.5em 1em;
	}

	.icons a {
		font-size: 1.5em;
		color: #ffefdb;
		transition: color 0.2s ease;
		width: 2em;;
		height: 2em;
	}

	.icons a:hover {
		color: #3a0101;
	}

	.icons .label {
		display: none;
	}

	#footer ul > li > a.instagram::after {
		mask-image: url("Images/instagram_icon.svg");
		mask-position: center;
		mask-repeat: no-repeat;
		mask-size: contain;
		content: '';
		display: inline-block;
		width: 1.3em;
		height: 1.3em;
		background-color: #ffefdb;
	}

	#footer ul > li > a.instagram:hover::after {
		background-color: #3a0101;
	}

	#footer ul > li > a.envelope::after {
			mask-image: url("Images/umschlag_icon.svg");
			mask-position: center;
			mask-repeat: no-repeat;
			content: '';
			display: inline-block;
			height: 1.8em;
			right: 4em;
			width: 1.5em;
			margin: 0 0.6em 0 1.5em;
			mask-size: contain;
			transform: translateY(-0.26em);
			background-color: #ffefdb;
	}

	#footer ul > li > a.envelope:hover::after {
		background-color: #3a0101;
	}



	/* sorgt dafür, dass die beiden Listenelemente in einer Zeile stehen mit Trennstrich dazwischen */
	.copyright {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.75em;
		flex-wrap: nowrap;
		font-size: 0.8em;
	}

	.copyright li {
		display: inline-block;
	}

	.copyright li + li::before {
		content: "|";
		margin-right: 0.75em;
	}

	.imprint {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		font-size: 0.8em;
		text-decoration: underline;
		padding-top: 1em;
	}


/* Special -------------------------------------------------------------- */
	#confetti-canvas {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 10002;
	}

	#curtain-overlay {
		position: fixed;
		inset: 0;
		z-index: 10001;
		pointer-events: none;
		overflow: hidden;
	}

	/* Vorhang liegt vor der Website, aber hinter dem Konfetti */
#curtain-overlay {
	position: fixed;
	inset: 0;
	z-index: 10001;
	pointer-events: none;
	overflow: hidden;
}

/* obere Vorhangkante / Schiene */
#curtain-overlay::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3.5em;
	z-index: 3;

	background:
		linear-gradient(
			to bottom,
			#14070a 0%,
			#3a0101 45%,
			#18070a 100%
		);

	box-shadow:
		0 0.4em 1em rgba(0, 0, 0, 0.45),
		inset 0 -0.4em 0.8em rgba(0, 0, 0, 0.35);

	transform: translateY(0);
	transition: transform 0.5s ease-in-out 1s;
}

/* die beiden Vorhanghälften */
.curtain {
	position: absolute;
	top: 0;
	width: 52%;
	height: 100%;

	background:
		/* helle und dunkle Stofffalten */
		repeating-linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.08) 0px,
			rgba(255, 255, 255, 0.02) 10px,
			rgba(0, 0, 0, 0.22) 24px,
			rgba(255, 255, 255, 0.04) 38px,
			rgba(0, 0, 0, 0.28) 56px
		),

		/* leichter Glanz in der Mitte */
		linear-gradient(
			90deg,
			#21060b 0%,
			#41050a 35%,
			#3a0101 70%,
			#160609 100%
		);

	box-shadow:
		inset 0 0 3em rgba(0, 0, 0, 0.5),
		0 0 2em rgba(0, 0, 0, 0.45);

	transition: transform 2.4s cubic-bezier(0.77, 0, 0.18, 1);
}

/* zusätzliche tiefe Falten */
.curtain::before {
	content: '';
	position: absolute;
	inset: 0;

	background:
		repeating-linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.35) 0px,
			rgba(0, 0, 0, 0.05) 18px,
			rgba(255, 255, 255, 0.10) 32px,
			rgba(0, 0, 0, 0.25) 52px
		);

	opacity: 0.65;
}

/* leichte Stoffkante unten */
.curtain::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2.5em;

	background:
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0),
			rgba(0, 0, 0, 0.35)
		);
}

.curtain-left {
	left: 0;
	transform: translateX(0);
	border-right: 0.25em solid rgba(20, 0, 0, 0.55);
}

.curtain-right {
	right: 0;
	transform: translateX(0);
	border-left: 0.25em solid rgba(20, 0, 0, 0.55);
}

/* Vorhang öffnet sich */
body.curtain-open .curtain-left {
	transform: translateX(-120%);
}

body.curtain-open .curtain-right {
	transform: translateX(120%);
}

/* Overlay nach der Animation ausblenden */
body.curtain-open #curtain-overlay {
	animation: hideCurtain 2.5s forwards;
}

body.curtain-open #curtain-overlay::before {
	transform: translateY(-120%);
}

@keyframes hideCurtain {
	0% {
		visibility: visible;
	}

	99% {
		visibility: visible;
	}

	100% {
		visibility: hidden;
	}
}


/* Tablet Querformat -------------------------------------------------- */
/* Für Tablets im Querformat, z.B. iPad quer / Android Tablet quer */
@media screen and (min-width: 721px) and (max-width: 1390px) and (orientation: landscape) {

	/* Grundlayout */
	body {
		font-size: 11pt;
		letter-spacing: 0.05em;
		overflow-x: hidden;
	}

	h1, h2, h3, h4, h5, h6 {
		letter-spacing: 0.16em;
	}

	p {
		line-height: 1.45em;
	}

	/* Header */
	#header h1 {
		left: 1em;
		font-size: 1.5em;
		letter-spacing: 0.18em;
		max-width: 70vw;
		overflow: hidden;
		white-space: nowrap;
	}

	#header nav {
		font-size: 1.8em;
	}

	#header nav > ul > li > a {
		padding: 0 1em;
		letter-spacing: 0.16em;
	}

	#header nav > ul > li > a.menuIcon::after {
		margin: 0 0 0 0.8em;
	}

	/* Starter allgemein */
	#starter,
	#starter2,
	#starter3,
	#starter4,
	#starterBasic {
		font-size: 2.35em;
		line-height: 1.1em;
		transform: none;
	}

	#starter {
		height: 100svh;
	}

	#starter h2 {
		font-size: 3em;
		padding: 1em 1em 3em 1em;
		transform: translateY(1em);
	}

	#starter .more.scrolly {
		margin-top: 1em;
		font-size: 1em;
	}

	/* Galerie-Starter */
	#starter2 {
		height: 100svh;
		transform: none;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}

	#starter2 h2 {
		font-size: 2em;
		transform: translateY(-1em);
	}

	/* 3D-Starter */
	#starter3 {
		height: 100svh;
		transform: none;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}

	#starter3 h2 {
		font-size: 2em;
		transform: none;
		background-color: #f3e8e3a6;
		margin: 0 2em 1em 2em;
		padding: 0.35em 0.7em;
		border-radius: 1em;
	}

	#starter4,
	#starterBasic {
		height: 30svh;
		min-height: 5em;
	}

	#starter4 h2,
	#starterBasic h2 {
		font-size: 2.5em;
		padding-top: 1.5em;
	}

	/* Startseiten-Abschnitte */
	#section1 {
		padding-left: 2em;
		padding-right: 2em;
	}

	#details_d1 {
		padding-top: 3em;
	}

	#introText {
		max-width: 900px;
		width: 100%;
		padding: 0 2em;
	}

	#gallery-link {
		font-size: 1.7em;
		max-width: 9em;
		padding: 1em 0.8em;
		background-color: #330c13;
	}

	#section1.design1 {
		min-height: 100svh;
	}

	#section1.design2 {
		height: 7em;
	}

	/* About- und Artwork-Seiten */
	#section1.design3,
	#section1.designArt {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 4em 3em;
		gap: 2em;
	}

	#section1.design3 > .about-image,
	#section1.design3 > .about-texts,
	#section1.designArt > .artwork-image,
	#section1.designArt > .about-texts {
		flex: 1;
		min-width: 0;
		padding: 0;
	}

	.artwork-image,
	.about-image {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.artwork-image img,
	.about-image img {
		max-width: 42vw;
		max-height: 76svh;
		width: auto;
		height: auto;
		padding: 0;
		margin: 0 auto;
		object-fit: contain;
	}

	.about-texts {
		max-width: none;
		width: 100%;
		padding: 0 1.5em;
		font-size: 0.85em;
		line-height: 1.45em;
		text-align: left;
		align-self: center;
	}

	.about-text {
		display: none;
	}

	.about-text.active {
		display: block;
	}

	.lang-btn {
		font-size: 0.9rem;
		padding: 0.45rem 0.9rem;
	}

	/* Galerie */
	.gallery-cpl {
		background-position: center top;
		background-size: cover;
		min-height: 110svh;
		width: 100%;
	}

	.gallery-container {
		display: grid;
		grid-template-columns: 7em minmax(0, 1fr) 7em;
		align-items: center;
		justify-items: center;

		width: min(86vw, 1050px);
		margin: 0 auto;

		/* Damit schiebst du Bild + Buttons in den Rahmen */
		padding: 23.5svh 2em 0 2em;

		gap: 0.5em;
		transform: none;
	}

	.gallery-container::before {
		left: 67%;
		top: 19.5svh;
		width: 9em;
		opacity: 0.3;
	}

	.gallery-image-wrap {
		width: 100%;
		min-width: 0;
		height: auto;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	#gallery-image-link {
		width: 100%;
		height: 56svh;

		display: flex;
		align-items: center;
		justify-content: center;
	}

	#gallery-image {
		max-width: 100%;
		max-height: 82%;
		width: auto;
		height: auto;
		object-fit: contain;
	}

	#details_all {
		margin-top: 1em;
		text-align: center;
		transform: none;
	}

	#gallery-caption-main {
		font-size: 1.6em;
		line-height: 1.2em;
		margin-top: 0;
		letter-spacing: 0.05em;
	}

	.gallery-btn {
		font-size: 0;
		margin: 0;
		padding: 0;

		width: 2.5rem;
		height: 2.5rem;

		display: flex;
		align-items: center;
		justify-content: center;
	}

	.gallery-btn.prev {
		justify-self: end;
	}

	.gallery-btn.next {
		justify-self: start;
	}

	.gallery-btn::before {
		font-size: 6rem;
		line-height: 1;
		font-family: Helvetica, sans-serif;
	}

	.gallery-btn.prev::before {
		content: "‹";
	}

	.gallery-btn.next::before {
		content: "›";
	}

	#details {
		width: 90%;
		height: auto;
		margin: -5em auto 0 auto;
		padding: 0 0 5em 0;

		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: center;
		gap: 0.75em;

		font-size: 0.9em;
		line-height: 1.25em;
	}

	#details p,
	#details li,
	#details div {
		min-width: 0;
		hyphens: auto;
		overflow-wrap: break-word;
	}

	#return-btn {
		display: block;
		transform: none;
		padding: 0.5em;
	}

	/* Basic / Kontakt / Impressum */
	.basic {
		min-height: 100svh;
		padding: 6em 3em 5em 3em;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.basic h2 {
		font-size: 2.5em;
	}

	.basic main,
	.basic .content {
		max-width: 800px;
		width: 100%;
		margin: 0 auto;
	}

	#imprint {
		padding: 6em 3em 3em 3em;
	}

	#imprint .content {
		max-width: 800px;
		width: 100%;
		font-size: 0.95em;
		line-height: 1.45em;
	}

	/* Footer */
	#footer {
		padding: 2em 2em 1em 2em;
	}

	.icons {
		margin: 0 0 0.75em 0;
		gap: 0.75em;
	}

	.copyright {
		font-size: 0.75em;
		line-height: 1.4em;
	}
}

	
/* Mobile Version ------------------------------*/

@media screen and (max-width: 720px), screen and (orientation: portrait) {
	/* Grundlayout */
	body {
		font-size: 10pt;
		letter-spacing: 0.0375em;
		overflow-x: hidden;
	}

	h1, h2, h3, h4, h5, h6 {
		letter-spacing: 0.12em;
	}

	h2 {
		font-size: 1.2em;
		line-height: 1.4em;
	}

	h3 {
		font-size: 1.05em;
		line-height: 1.4em;
	}

	p {
		line-height: 1.45em;
		margin-bottom: 1.4em;
	}

	/* Header / Menü */
	#header h1 {
		left: 0.9em;
		font-size: 1.5em;
		letter-spacing: 0.12em;
		max-width: 70vw;
		overflow: hidden;
		white-space: nowrap;
	}

	#header nav {
		font-size: 2em;
	}

	#header nav > ul > li > a {
		padding: 0 0.9em;
		letter-spacing: 0.15em;
	}

	#header nav > ul > li > a.menuIcon::after {
		margin: 0 0 0 0.7em;
	}

	#menu {
		width: 18em;
		max-width: 85vw;
		padding: 3em 1.5em;
	}

	#menu ul > li {
		font-size: 1.4em;
	}

	#menu ul > li > a {
		letter-spacing: 0.3em;
		line-height: 2em;
	}

	/* Starter-Bereiche */
	#starter,
	#starter2,
	#starter3,
	#starter4,
	#starterBasic {
		font-size: 2em;
		line-height: 1.1em;
		transform: none;
	}

	#starter {
		height: 100vh;
	}

	#starter2 {
		height: 90vh;
		transform: none;

		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		background-color: #1d242a;
	}

	#starter3 {
		height: 100svh;
		transform: none;

		background-size: 440%;
		background-position: bottom center;
		background-repeat: no-repeat;
		background-color: #1d242a;
	}

	#starter4,
	#starterBasic {
		height: 24svh;
		min-height: 6em;
	}

	#starter h2 {
		font-size: 2em;
		padding: -1em 1em 0 1em;
		transform: none;
	}

	#starter2 h2 {
		font-size: 2em;
		transform: translateY(-50%);
	}

	#starter3 h2 {
		font-size: 2em;
		background-color: #f3e8e3a6;
		margin: 1em 1em 3em 1em;
		padding: 0.5em 0;
		border-radius: 0.5em;
		transform: translateY(10px);
	}

	#starter .more.scrolly {
		bottom: 5em;
		margin-top: 0;
		padding-top: 0;
		font-size: 1.2em;
	}

	#starter4 h2,
	#starterBasic h2{
		padding-top: 2em;
	}


	/* Hintergrundbilder auf Unterseiten */
	body.chapter1 #page_cpl{
		background-position: center top;
		background-size: cover;
	}

	body.chapter2 #page_cpl{
		background-size: cover;
	}

	/* Allgemeine Sections */
	#section1 {
		padding-left: 1.25em;
		padding-right: 1.25em;
	}

	#introText {
		max-width: none;
		width: 100%;
		padding: 0;
	}

	#gallery-link {
		font-size: 1.5em;
		max-width: 9em;
		padding: 0.8em 1em;
		background-color: #330c13;
	}

	#section1.design2 {
		height: auto;
		min-height: 7em;
		padding: 1.5em 1em;
	}

	/* About- und Artwork-Seiten: aus zwei Spalten wird eine Spalte */
	#section1.design3,
	#section1.designArt {
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		padding: 3em 1.25em;
		gap: 2em;
	}

	#section1.design3 > .about-image,
	#section1.design3 > .about-texts,
	#section1.designArt > .artwork-image,
	#section1.designArt > .about-texts {
		flex: none;
		width: 100%;
		max-width: none;
		padding: 0;
	}

	.artwork-image img,
	.about-image img {
		max-width: 90vw;
		max-height: 55vh;
		width: auto;
		height: auto;
		padding: 0;
		margin: 0 auto;
		object-fit: contain;
	}

	.about-texts {
		width: 100%;
		max-width: none;
		padding: 0;
		font-size: 0.95em;
		text-align: center;
	}

	/* Wichtig für deinen Sprachwechsel: nur die aktive Sprache sichtbar machen */
	.about-text {
		display: none;
		width: 100%;
		max-width: none;
		min-width: 0;
		box-sizing: border-box;
		text-align: center;
	}

	.about-text.active {
		display: block;
	}

	.about-text.active .major,
	.about-text.active p {
		width: 100%;
		max-width: none;
		min-width: 0;
		box-sizing: border-box;
		white-space: normal;
		word-break: normal;
		overflow-wrap: break-word;
		hyphens: auto;
		line-height: 1.45em;
		padding: 0;
	}

	.lang-btn {
		font-size: 0.9rem;
		padding: 0.45rem 0.9rem;
		margin-bottom: 0.5em;
	}

	/* Galerie */
	.gallery-cpl {
		background-position: center top;
		background-size: cover;
		min-height: 100svh;
		width: 100%;
	}

	.gallery-container {
		display: grid;
		grid-template-columns: 2.5em minmax(0, 1fr) 2.5em;
		align-items: center;
		justify-items: center;

		width: min(96vw, 520px);
		margin: 0 auto;

		/* Damit schiebst du Bild + Buttons in den Rahmen */
		padding: 25svh 0.5em 0 0.5em;

		gap: 0.2em;
		transform: none;
	}

	.gallery-container::before {
		left: 61%;
		top: 7em;
		width: 10em;
		opacity: 0.25;
	}

	.gallery-image-wrap {
		width: 100%;
		min-width: 0;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	#gallery-image-link {
		width: 100%;
		height: 44svh;

		display: flex;
		align-items: center;
		justify-content: center;
	}

	#gallery-image {
		max-width: 78vw;
		max-height: 100%;
		width: auto;
		height: auto;
		object-fit: contain;
	}

	#details_all {
		margin-top: 2em;
		text-align: center;
		transform: none;
	}

	#gallery-caption-main {
		font-size: 1.5em;
		line-height: 1.2em;
		margin-top: 0;
	}

	.gallery-btn {
		font-size: 0;
		margin: 0;
		padding: 0;

		width: 2.2rem;
		height: 2.2rem;

		display: flex;
		align-items: center;
		justify-content: center;
	}

	.gallery-btn.prev {
		justify-self: end;
	}

	.gallery-btn.next {
		justify-self: start;
	}

	.gallery-btn::before {
		font-size: 2.4rem;
		line-height: 1;
		font-family: Helvetica, sans-serif;
	}

	.gallery-btn.prev::before {
		content: "‹";
	}

	.gallery-btn.next::before {
		content: "›";
	}

	#details {
		width: 92%;
		height: auto;
		margin: -3em auto 0 auto;
		padding: 0 0 4em 0;

		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: center;
		gap: 0.75em;

		line-height: 1.25em;
		font-size: 0.9em;
	}

	#details p,
	#details li,
	#details div {
		min-width: 0;
		hyphens: auto;
		overflow-wrap: break-word;
	}

	#return-btn {
		display: flex;
		transform: none;
		padding: 0.5em 1em;
	}


	/* Basic / Impressum */
	.basic {
		min-height: 100vh;
		padding: 7em 1.25em 5em 1.25em;

		display: flex;
		flex-direction: column;   /* Header und Text untereinander */
		justify-content: center;  /* vertikal mittig */
		align-items: center;      /* horizontal mittig */
		text-align: center;
	}

	.basic h2 {
		font-size: 2.2em;
	}

	#imprint {
		padding: 5em 1.25em 2em 1.25em;
	}

	#imprint .content {
		max-width: none;
		width: 80%;
		font-size: 0.95em;
		line-height: 1.45em;
	}

	/* Footer */
	#footer {
		padding: 2em 1.25em 1em 1.25em;
	}

	.icons {
		margin: 0 0 0.75em 1em;
		gap: 0.75em;
	}

	.copyright {
		flex-direction: column;
		gap: 0.25em;
		font-size: 0.75em;
		line-height: 1.4em;
	}

	.copyright li + li::before {
		content: "";
		margin: 0;
	}

	.imprint {
		font-size: 0.8em;
		padding-top: 1.2em;
	}
}