/* --- FARBVARIABLEN --- */
:root {
    --color-dark-anthracite: #1C1C1C; /* Sehr dunkles Grau / Fast Schwarz */
    --color-light-offwhite: #F0F0F0;  /* Warmes Off-White / Creme */
    --color-gold-accent: #B8860B;     /* Sattes, edles Gold (Dark Goldenrod) */
    --color-gold-darker: #A06B00;     /* Etwas dunkleres Gold für aktive Zustände */
    --color-text-primary: #E0E0E0;    /* Helle Schriftfarbe für dunklen Hintergrund */
    --color-border-subtle: #404040;   /* Dezentes Grau für Ränder/Linien */
    --color-transp-light: rgba(240, 240, 240, 0.85); /* Leichte Transparenz für Text */
    --color-transp-dark: rgba(33, 33, 33, 0.125); /* Leichte Transparenz für dunkle Überlagerungen */
    --color-transp-gold: rgba(184, 134, 11, 0.5); /* Leichte Transparenz für goldenen Schatten */
	--color-black: #010101; /* Schwarz */
	--color-dark: #030504; /* extrem dunkles grau  */
	--color-white: #ffffff; /* weiß */
}
/* -------------------- */


html, body, div, span, h1, h2, h3, h4, h5, p, a, img, strong, b, ul, li, form, label, section {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}
	
section {
	display: block;}

body {
	line-height: 1;
}

ul {
	list-style: none;
}

body {
	-webkit-text-size-adjust: none;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Page */

	@-moz-keyframes load-spinner {
		0% {
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-moz-transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@-webkit-keyframes load-spinner {
		0% {
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-moz-transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@-ms-keyframes load-spinner {
		0% {
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-moz-transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@keyframes load-spinner {
		0% {
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-moz-transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@-ms-viewport {
		width: device-width;
	}

	html {
		width: 100%;
		height: 100%;		
	}
	
	html.is-mobile {
		overflow-x: hidden;
	}

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}


	body {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: -moz-flex-start;
		-webkit-justify-content: -webkit-flex-start;
		-ms-justify-content: -ms-flex-start;
		justify-content: flex-start;
		-ms-overflow-style: scrollbar;
		width: 100%;
		height: 100%;
		min-height: 30rem;
		overflow: hidden;
		background-color: var(--color-dark-anthracite); 
		background-image: url("../../images/overlay.png"), url("../../images/bg.jpg");
		background-size: 128px 128px, cover;
		background-position: center center;
		background-repeat: repeat, no-repeat;
		background-attachment: fixed;
		min-height: 100dvh; 
	}


		body:before {
			-moz-animation: load-spinner 1s infinite linear;
			-webkit-animation: load-spinner 1s infinite linear;
			-ms-animation: load-spinner 1s infinite linear;
			animation: load-spinner 1s infinite linear;
			-moz-transition: opacity 0.25s ease;
			-webkit-transition: opacity 0.25s ease;
			-ms-transition: opacity 0.25s ease;
			transition: opacity 0.25s ease;
			-moz-transition-delay: 0s;
			-webkit-transition-delay: 0s;
			-ms-transition-delay: 0s;
			transition-delay: 0s;
			pointer-events: none;
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			width: 4rem;
			height: 4rem;
			margin: -2rem 0 0 -2rem;
			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='96px' height='96px' viewBox='0 0 96 96' zoomAndPan='disable'%3E%3Cstyle%3Ecircle %7Bfill: transparent%3B stroke: %232e2b37%3B stroke-width: 1.5px%3B %7D%3C/style%3E%3Cdefs%3E%3CclipPath id='corner'%3E%3Cpolygon points='0,0 48,0 48,48 96,48 96,96 0,96' /%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23corner)'%3E%3Ccircle cx='48' cy='48' r='32'/%3E%3C/g%3E%3C/svg%3E");
			background-position: center;
			background-repeat: no-repeat;
			background-size: 4rem;
			opacity: 0.01;
		}


		body.is-preload *, body.is-preload *:before, body.is-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.is-preload:before {
			-moz-transition: opacity 1s ease;
			-webkit-transition: opacity 1s ease;
			-ms-transition: opacity 1s ease;
			transition: opacity 1s ease;
			-moz-transition-delay: 0.75s;
			-webkit-transition-delay: 0.75s;
			-ms-transition-delay: 0.75s;
			transition-delay: 0.75s;
			opacity: 0.25;
		}
		

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

		html {
			height: auto;
		}

		body {
			height: auto;
			overflow-x: hidden;
			overflow-y: auto;
		}

	}

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

		html, body {
			min-width: 300px;
			overflow-x: hidden;
		}

	}

/* Typography */

	html {
		font-size: 18pt;
		font-size: 1vmax;
	}

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

			html {
				font-size: 12pt;
				font-size: 1.1vmax;
			}

		}

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

			html {
				font-size: 11pt;
				font-size: 1.5vmax;
			}

		}

	body, input, textarea {
		color: var(--color-text-primary); /* Angepasst */
		font-family: "Source Sans Pro", Helvetica, sans-serif;
		font-size: 1rem;
		font-weight: 300;
		line-height: 1.65;
	}

	a {
		-moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		color: inherit;
		border-bottom: dotted 1px;
		text-decoration: none;
	}

		a:hover {
			border-bottom-color: transparent;
			color: var(--color-gold-accent); /* Angepasst */
		}

	strong, b {
		color: var(--color-light-offwhite); /* Angepasst */
		font-weight: 400;
	}

	p {
		margin: 0 0 1.5rem 0;
	}

	h1, h2, h3, h4, h5 {
		color: var(--color-light-offwhite); /* Angepasst */
		font-family: Arial, Helvetica, sans-serif;
		font-weight: 700;
		line-height: 1.3;
		margin: 0 0 0.75rem 0;
		letter-spacing: -0.05em;
	}

	h1.major, h2.major, h3.major {
		position: relative;
	}

		h1.major:after, h2.major:after, h3.major:after {
			content: '';
			position: absolute;
			left: 0;
			width: 3.5rem;
			height: 0.1rem;
			background-color: rgba(255, 255, 255, 0.25);
		}

	h1 {
		font-size: 3rem;
		line-height: 1.2;
	}

		h1.major {
			margin: 0 0 2.625rem 0;
		}

			h1.major:after {
				bottom: -1.325rem;
			}

	h2 {
		font-size: 1.75rem;
		line-height: 1.2;
	}

		h2.major {
			margin: 0 0 1.9875rem 0;
		}

			h2.major:after {
				bottom: -1.2rem;
			}
		
		h2.untertitel {
			font-size: 1.325rem;
		}

	h3 {
		font-size: 1.325rem;
	}

		h3.major {
			margin: 0 0 1.875rem 0;
		}

			h3.major:after {
				bottom: -0.75rem;
			}

	h4 {
		font-size: 1rem;
	}

	h5 {
		font-size: 0.9rem;
	}

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

		html {
			font-size: 12pt;
		}

		h1 {
			font-size: 2.25rem;
			line-height: 1.2;
		}

			h1.major {
				margin: 0 0 2.625rem 0;
			}

				h1.major:after {
					bottom: -1.325rem;
				}

		h2 {
			font-size: 1.5rem;
			line-height: 1.2;
		}

			h2.major {
				margin: 0 0 1.9875rem 0;
			}

				h2.major:after {
					bottom: -1.2rem;
				}
				
			h2.untertitel {
				font-size: 1rem;
			}

		h3 {
			font-size: 1rem;
		}

			h3.major {
				margin: 0 0 1.875rem 0;
			}

				h3.major:after {
					bottom: -0.75rem;
				}

		h4 {
			font-size: 1rem;
		}

		h5 {
			font-size: 0.9rem;
		}

	}

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

		html {
			font-size: 11pt;
		}

	}

/* Form */
	.error {
    	border: solid 2px  red !important; 
		border-radius: 0.25rem;
	}								
	
	.name_error,
	.email_error,
	.postcode_error,
	.city_error,
	.phone_error,
	.message_error {
    	color: red;
    	margin-top: 5px;
    	display: none; /* Initial versteckt */
	}

	form {
		margin: 0 0 1.5rem 0;
	}

		form > :last-child {
			margin-bottom: 0;
		}

		form > .fields {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			width: calc(100% + 3rem);
			margin: -1.5rem 0 1.5rem -1.5rem;
		}

			form > .fields > .field {
				-moz-flex-grow: 0;
				-webkit-flex-grow: 0;
				-ms-flex-grow: 0;
				flex-grow: 0;
				-moz-flex-shrink: 0;
				-webkit-flex-shrink: 0;
				-ms-flex-shrink: 0;
				flex-shrink: 0;
				padding: 1.5rem 0 0 1.5rem;
				width: calc(100% - 1.5rem);
			}

				form > .fields > .field.half {
					width: calc(50% - 0.75rem);
				}

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

			form > .fields {
				width: calc(100% + 2.25rem);
				margin: -1.125rem 0 1.5rem -1.125rem;
			}

				form > .fields > .field {
					padding: 1.125rem 0 0 1.125rem;
					width: calc(100% - 1.125rem);
				}

					form > .fields > .field.half {
						width: calc(100% - 1.125rem);
					}

		}

	label {
		color: var(--color-light-offwhite); /* Angepasst */
		display: block;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 0.8rem;
		font-weight: 700;
		margin: 0 0 0.4875rem 0;
	}

	input[type="text"],
	input[type="email"],
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background: transparent;
		border: solid 2px rgba(255, 255, 255, 0.25);
		border-radius: 0.25rem;
		color: inherit;
		display: block;
		outline: 0;
		padding: 0 0.75rem;
		text-decoration: none;
		width: 100%;
	}

		input[type="text"]:invalid,
		input[type="email"]:invalid,
		textarea:invalid {
			box-shadow: none;
		}

		input[type="text"]:focus,
		input[type="email"]:focus,
		textarea:focus {
			border-color: var(--color-gold-accent); /* Angepasst */
		}

	input[type="text"],
	input[type="email"] {
		height: 2.5rem;
	}

	textarea {
		padding: 0.75rem 1rem;
	}

	::-webkit-input-placeholder {
		color: rgba(224, 224, 224, 0.5) !important; /* Angepasst */
		opacity: 1.0;
	}

	:-moz-placeholder {
		color: rgba(224, 224, 224, 0.5) !important; /* Angepasst */
		opacity: 1.0;
	}

	::-moz-placeholder {
		color: rgba(224, 224, 224, 0.5) !important; /* Angepasst */
		opacity: 1.0;
	}

	:-ms-input-placeholder {
		color: rgba(224, 224, 224, 0.5) !important; /* Angepasst */
		opacity: 1.0;
	}


/* Image */

	.image {
		display: inline-block;
		position: relative;
		border: 0;
	}

		.image.filtered:after {
			background-image: url("../../images/overlay.png"), linear-gradient(45deg, var(--color-dark-anthracite) 25%, var(--color-gold-accent) 50%, var(--color-light-offwhite) 0.25); /* Angepasst */
			background-size: 128px 128px, auto;
			pointer-events: none;
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 1;
			z-index: 1;
		}

		.image.filtered.tinted:after {
			background-image: url("../../images/overlay.png"), linear-gradient(45deg, var(--color-dark-anthracite) 25%, var(--color-gold-accent) 50%, var(--color-light-offwhite) 0.25), linear-gradient(0deg, rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.125)); /* Angepasst */
			background-size: 128px 128px, auto, auto;
		}

		.image[data-position] img {
			-moz-object-fit: cover;
			-webkit-object-fit: cover;
			-ms-object-fit: cover;
			object-fit: cover;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.image[data-position="top left"] img {
			-moz-object-position: top left;
			-webkit-object-position: top left;
			-ms-object-position: top left;
			object-position: top left;
		}

		.image[data-position="top right"] img {
			-moz-object-position: top right;
			-webkit-object-position: top right;
			-ms-object-position: top right;
			object-position: top right;
		}

		.image[data-position="25% 25%"] img {
			-moz-object-position: 25% 25%;
			-webkit-object-position: 25% 25%;
			-ms-object-position: 25% 25%;
			object-position: 25% 25%;
		}

		.image img {
			display: block;
		}

/* List */

	ul {
		list-style: disc;
		margin: 0 0 1.5rem 0;
		padding-left: 1rem;
	}

		ul li {
			padding-left: 0.5rem;
		}

/* Actions */

	ul.actions {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		cursor: default;
		list-style: none;
		margin-left: -0.75rem;
		padding-left: 0;
	}

		ul.actions li {
			padding: 0 0 0 0.75rem;
			vertical-align: middle;
		}


/* Button */

	input[type="submit"],
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
		background-color: transparent;
		border: 0;
		border-radius: 0.25rem;
		box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
		color: var(--color-light-offwhite) !important; /* Angepasst */
		cursor: pointer;
		display: inline-block;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 0.6rem;
		font-weight: 700;
		height: 2.75rem;
		letter-spacing: 0.15rem;
		line-height: 2.75rem;
		padding: 0 1.5rem 0 1.65rem;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}

		input[type="submit"]:hover,
		.button:hover {
			box-shadow: inset 0 0 0 2px var(--color-gold-accent); /* Angepasst */
			color: var(--color-gold-accent) !important; /* Angepasst */
		}

		input[type="submit"]:active,
		.button:active {
			background-color: var(--color-gold-darker); /* Angepasst */
		}

		input[type="submit"].primary,
		.button.primary {
			background-color: var(--color-gold-accent); /* Angepasst */
			box-shadow: none;
			color: var(--color-dark-anthracite) !important; /* Angepasst */
		}

			input[type="submit"].primary:hover,
			.button.primary:hover {
				background-color: var(--color-gold-accent); /* Angepasst */
			}

			input[type="submit"].primary:active,
			.button.primary:active {
				background-color: var(--color-gold-darker); /* Angepasst */
			}

		input[type="submit"]:disabled, .button:disabled {
			pointer-events: none;
			cursor: default;
			opacity: 0.5;
		}

/* Panel */

	.panel {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-grow: 0;
		-webkit-flex-grow: 0;
		-ms-flex-grow: 0;
		flex-grow: 0;
		-moz-flex-shrink: 0;
		-webkit-flex-shrink: 0;
		-ms-flex-shrink: 0;
		flex-shrink: 0;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		-moz-align-items: -moz-stretch;
		-webkit-align-items: -webkit-stretch;
		-ms-align-items: -ms-stretch;
		align-items: stretch;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}

		.panel > * {
			position: relative;
			min-width: 0;
		}

			.panel > *.color0 {
				background-image: url("../../images/overlay.png"), linear-gradient(45deg, var(--color-dark-anthracite) 20%, var(--color-border-subtle) 60%, var(--color-gold-accent)); /* Angepasst */
				background-size: 128px 128px, auto;
			}

			.panel > *.color2 {
				background-image: url("../../images/overlay.png"), linear-gradient(45deg, var(--color-transp-dark) 25%, var(--color-transp-gold) 50%, rgba(var(--color-light-offwhite), 0.25)); /* Angepasst */
				background-size: 128px 128px, auto;
				background-color: var(--color-border-subtle); /* Angepasst: Weniger Goldfläche */
			}

			.panel > *.color3 {
				background-image: url("../../images/overlay.png"), linear-gradient(45deg, var(--color-transp-dark) 25%, var(--color-transp-gold) 50%, rgba(var(--color-light-offwhite), 0.25)); /* Angepasst */
				background-size: 128px 128px, auto;
				background-color: var(--color-light-offwhite); /* Angepasst */
				color: var(--color-dark-anthracite); /* Dunkles Anthrazit */
			}

			.panel > *.color4 {
				background-image: url("../../images/overlay.png"), linear-gradient(45deg, var(--color-transp-dark) 25%, var(--color-transp-gold) 50%, rgba(var(--color-light-offwhite), 0.25)); /* Angepasst */
				background-size: 128px 128px, auto;
				background-color: var(--color-black); /* Angepasst */
			}
			
			.panel.color3 .content h2,
			.panel.color3 .content p {
				color: var(--color-dark-anthracite); /* Dunkles Anthrazit */
			}
			
			.panel.color3 .content h2:after {
				background-color: rgba(0, 0, 0, 0.25); /* Farbe des Strichs */
			}

			.panel > *.color3 h2,
			.panel > *.color3 p {
				color: var(--color-dark-anthracite);
			}

			.panel > *.color3 h2.major:after {
				background-color: rgba(0, 0, 0, 0.25); /* Farbe des Strichs */
			}

		.panel > .mobile{
			display: none;
		}

		.panel > .intro {
			padding: 3.5rem 3.5rem 2rem 3.5rem ;
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-grow: 0;
			-webkit-flex-grow: 0;
			-ms-flex-grow: 0;
			flex-grow: 0;
			-moz-flex-shrink: 0;
			-webkit-flex-shrink: 0;
			-ms-flex-shrink: 0;
			flex-shrink: 0;
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			-moz-align-items: -moz-flex-start;
			-webkit-align-items: -webkit-flex-start;
			-ms-align-items: -ms-flex-start;
			align-items: flex-start;
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			width: 22rem;
		}

			.panel > .intro.desktop {
				display: -moz-flex;
				display: -webkit-flex;
				display: -ms-flex;
				display: flex;
			}	

			.panel > .intro.mobile {
				display: none;
			}

		.panel > .inner {
			padding: 3.5rem 3.5rem 2rem 3.5rem ;
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-grow: 1;
			-webkit-flex-grow: 1;
			-ms-flex-grow: 1;
			flex-grow: 1;
			-moz-flex-shrink: 1;
			-webkit-flex-shrink: 1;
			-ms-flex-shrink: 1;
			flex-shrink: 1;
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			-moz-align-items: -moz-flex-start;
			-webkit-align-items: -webkit-flex-start;
			-ms-align-items: -ms-flex-start;
			align-items: flex-start;
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			position: relative;
			width: 100%;
		}

			.panel > .inner.columns {
				display: -moz-flex;
				display: -webkit-flex;
				display: -ms-flex;
				display: flex;
				-moz-justify-content: center;
				-webkit-justify-content: center;
				-ms-justify-content: center;
				justify-content: center;
				-moz-align-items: center;
				-webkit-align-items: center;
				-ms-align-items: center;
				align-items: center;
				-moz-flex-direction: row;
				-webkit-flex-direction: row;
				-ms-flex-direction: row;
				flex-direction: row;
			}

				.panel > .inner.columns > * {
					-moz-flex-grow: 0;
					-webkit-flex-grow: 0;
					-ms-flex-grow: 0;
					flex-grow: 0;
					-moz-flex-shrink: 0;
					-webkit-flex-shrink: 0;
					-ms-flex-shrink: 0;
					flex-shrink: 0;
					margin-left: 3.5rem;
				}

				.panel > .inner.columns > :first-child {
					margin-left: 0;
				}

				.panel > .inner.columns.divided > * {
					margin-left: 7rem;
				}

					.panel > .inner.columns.divided > *:before {
						content: '';
						position: absolute;
						top: 3.5rem;
						width: 2px;
						height: calc(100% - 7rem);
						margin-left: -3.5rem;
						background-color: rgba(255, 255, 255, 0.25);
					}

				/* FIX: Nur den Pseudostrich des ersten Kindes ausblenden, nicht das Kind selbst */
				.panel > .inner.columns.divided > :first-child:before {
					display: none;
				}

		.panel .span-1-5 {
			width: 15rem;
		}

		.panel .span-1-75 {
			width: 17.5rem;
		}

		.panel .span-2-5 {
			width: 25rem;
		}

		.panel .span-2-75 {
			width: 27.5rem;
		}

		.panel .span-3-25 {
			width: 32.5rem;
		}

		.panel .span-3-75 {
			width: 37.5rem;
		}
		
		.panel .span-4-5 {
			width: 45rem;
		}
		
		.panel .span-5 {
			width: 50rem;
		}

		.panel .span-7 {
			width: 70rem;
		}

		.panel.medium {
			width: 50rem;
		}

		.panel.large {
			width: 65rem;
		}

		.panel.large .span-5 {
			width: 50%;
		}

		.panel.medium .span-7 {
			width: 70%;
		}

		.panel.color1 {
			background-image: url("../../images/overlay.png"), linear-gradient(45deg, var(--color-transp-dark) 25%, var(--color-transp-gold) 50%, rgba(var(--color-light-offwhite), 0.25)); /* Angepasst */
			background-size: 128px 128px, auto;
			background-color: var(--color-dark-anthracite); /* Angepasst */
		}

		.panel.color3 {
			background-image: url("../../images/overlay.png"), linear-gradient(45deg, var(--color-transp-dark) 25%, var(--color-transp-gold) 50%, rgba(var(--color-light-offwhite), 0.25)); /* Angepasst */
			background-size: 128px 128px, auto;
			background-color: var(--color-light-offwhite); /* Angepasst */
		}

		.panel.color5 {
			background-image: url("../../images/overlay.png"), linear-gradient(45deg, var(--color-transp-dark) 25%, var(--color-transp-gold) 50%, rgba(var(--color-light-offwhite), 0.25)); /* Angepasst */
			background-size: 128px 128px, auto;
			background-color: var(--color-dark); /* Angepasst */			
		}

		.panel.color6 {
			background-image: url("../../images/overlay.png"), linear-gradient(45deg, var(--color-transp-dark) 25%, var(--color-transp-gold) 50%, rgba(var(--color-light-offwhite), 0.25)); /* Angepasst */
			background-size: 128px 128px, auto;
			background-color: var(--color-black); /* Angepasst */
		}		

		.panel.color7 {
			background-image: url("../../images/overlay.png"), linear-gradient(45deg, var(--color-transp-dark) 25%, var(--color-transp-gold) 50%, rgba(var(--color-light-offwhite), 0.25)); /* Angepasst */
			background-size: 128px 128px, auto;
			background-color: var(--color-white); /* Angepasst */
		}

		.panel.color4-alt {
			background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(var(--color-dark-anthracite), 0.175) 25%, rgba(var(--color-gold-accent), 0.175) 50%, rgba(var(--color-light-offwhite), 0.175)); /* Angepasst */
			background-size: 128px 128px, auto;
				background-color: #0F0F0F; /* Angepasst */
			}

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

		.panel {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			height: auto;
		}

			.panel > *.color2 {
				background-image: url("../../images/overlay.png"), linear-gradient(135deg, var(--color-transp-dark) 25%, var(--color-transp-gold) 50%, rgba(var(--color-light-offwhite), 0.25)); /* Angepasst */
				background-size: 128px 128px, auto;
				background-color: var(--color-border-subtle); /* Angepasst */
			}

			.panel > *.color3 {
				background-image: url("../../images/overlay.png"), linear-gradient(135deg, var(--color-transp-dark) 25%, var(--color-transp-gold) 50%, rgba(var(--color-light-offwhite), 0.25)); /* Angepasst */
				background-size: 128px 128px, auto;
				background-color: var(--color-light-offwhite); /* Angepasst */
			}

			.panel > *.color4 {
				background-image: url("../../images/overlay.png"), linear-gradient(135deg, var(--color-transp-dark) 25%, var(--color-transp-gold) 50%, rgba(var(--color-light-offwhite), 0.25)); /* Angepasst */
				background-size: 128px 128px, auto;
				background-color: var(--color-dark-anthracite); /* Angepasst */
			}

			.panel > .mobile {
				padding: 0.5rem 1.75rem 1.3875rem 1.75rem ;
				display: -moz-flex;
				display: -webkit-flex;
				display: -ms-flex;
				display: flex;
				-moz-flex-grow: 0;
				-webkit-flex-grow: 0;
				-ms-flex-grow: 0;
				flex-grow: 0;
				-moz-flex-shrink: 0;
				-webkit-flex-shrink: 0;
				-ms-flex-shrink: 0;
				flex-shrink: 0;
				-moz-justify-content: center;
				-webkit-justify-content: center;
				-ms-justify-content: center;
				justify-content: center;
				-moz-align-items: -moz-flex-start;
				-webkit-align-items: -webkit-flex-start;
				-ms-align-items: -ms-flex-start;
				align-items: flex-start;
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				width: 100% !important;

			}

			.panel > .intro {
				padding: 2.8875rem 1.75rem 1.3875rem 1.75rem ;
				width: 100% !important;
			}

			.panel > .intro.desktop {
				display: none;
				}	

				.panel > .intro.mobile {
				display: -moz-flex;
				display: -webkit-flex;
				display: -ms-flex;
				display: flex;
				}

			.panel > .inner {
				padding: 2.8875rem 1.75rem 1.3875rem 1.75rem ;
			}

				.panel > .inner.columns {
					-moz-flex-direction: column;
					-webkit-flex-direction: column;
					-ms-flex-direction: column;
					flex-direction: column;
				}

					.panel > .inner.columns > * {
						margin-left: 0;
						margin-top: 0;
					}

					.panel > .inner.columns > :first-child {
						margin-top: 0;
					}

					.panel > .inner.columns.divided > * {
						margin-left: 0;
						margin-top: 3.5rem;
					}

						.panel > .inner.columns.divided > *:before {
							content: '';
							position: absolute;
							top: auto;
							left: 1.75rem;
							width: calc(100% - 3.5rem);
							height: 2px;
							margin-left: 0;
							margin-top: -1.75rem;
						}

					.panel > .inner.columns.divided > :first-child {
						margin-top: 0;
					}

			.panel .span-1-5 {
				width: 100%;
			}

			.panel .span-1-75 {
				width: 100%;
			}

			.panel .span-2-5 {
				width: 100%;
			}

			.panel .span-2-75 {
				width: 100%;
			}

			.panel .span-3-25 {
				width: 100%;
			}

			.panel .span-3-75 {
				width: 100%;
			}
			
			.panel .span-4-5 {
				width: 100%;
			}

			.panel .span-5 {
				width: 100%;
			}

			.panel .span-7 {
				width: 100%;
			}

			.panel.medium, .panel.large {
				width: 100% !important;
			}

				.panel.large .span-5 {
					width: 100%;
				}

				.panel.medium .span-7 {
					width: 100%;
				}

			.panel.color1 {
				background-image: url("../../images/overlay.png"), linear-gradient(45deg, var(--color-transp-dark) 25%, var(--color-transp-gold) 50%, rgba(var(--color-light-offwhite), 0.25)); /* Angepasst */
				background-size: 128px 128px, auto;
				background-color: var(--color-dark-anthracite); /* Angepasst */
			}

			.panel.color3 {
				background-image: url("../../images/overlay.png"), linear-gradient(45deg, var(--color-transp-dark) 25%, var(--color-transp-gold) 50%, rgba(var(--color-light-offwhite), 0.25)); /* Angepasst */
				background-size: 128px 128px, auto;
				background-color: var(--color-light-offwhite); /* Angepasst */
			}

			.panel.color4-alt {
				background-image: url("../../images/overlay.png"), linear-gradient(45deg, rgba(var(--color-dark-anthracite), 0.175) 25%, rgba(var(--color-gold-accent), 0.175) 50%, rgba(var(--color-light-offwhite), 0.175)); /* Angepasst */
				background-size: 128px 128px, auto;
				background-color: #0F0F0F; /* Angepasst */
			}

			.panel.color7 h2,
			.panel.color7 p {
				color: var(--color-dark-anthracite);
			}

			.panel.color7 h2.major:after {
				background-color: rgba(0, 0, 0, 0.25); /* Farbe des Strichs */
			}

	}

/* Panel (Banner) */

	.panel.banner {
		-moz-align-items: -moz-stretch;
		-webkit-align-items: -webkit-stretch;
		-ms-align-items: -ms-stretch;
		align-items: stretch;
	}

		.panel.banner .content {
			padding: 3.5rem 3.5rem 2rem 3.5rem ;
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			-moz-flex-grow: 0;
			-webkit-flex-grow: 0;
			-ms-flex-grow: 0;
			flex-grow: 0;
			-moz-flex-shrink: 0;
			-webkit-flex-shrink: 0;
			-ms-flex-shrink: 0;
			flex-shrink: 0;
		}

		.panel.banner .image {
			-moz-flex-grow: 0;
			-webkit-flex-grow: 0;
			-ms-flex-grow: 0;
			flex-grow: 0;
			-moz-flex-shrink: 0;
			-webkit-flex-shrink: 0;
			-ms-flex-shrink: 0;
			flex-shrink: 0;
			position: relative;
		}

			.panel.banner .image img {
				-moz-object-fit: cover;
				-webkit-object-fit: cover;
				-ms-object-fit: cover;
				object-fit: cover;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

		.panel.banner.right {
			-moz-flex-direction: row-reverse;
			-webkit-flex-direction: row-reverse;
			-ms-flex-direction: row-reverse;
			flex-direction: row-reverse;
		}

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

		.panel.banner .content {
			padding: 2.8875rem 1.75rem 1.3875rem 1.75rem ;
			-moz-flex-basis: 60%;
			-webkit-flex-basis: 60%;
			-ms-flex-basis: 60%;
			flex-basis: 60%;
		}

		.panel.banner .image {
			-moz-flex-basis: 40%;
			-webkit-flex-basis: 40%;
			-ms-flex-basis: 40%;
			flex-basis: 40%;
		}

	}

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

		.panel.banner .content {
			-moz-flex-basis: auto;
			-webkit-flex-basis: auto;
			-ms-flex-basis: auto;
			flex-basis: auto;
		}

		.panel.banner .image {
			-moz-flex-basis: auto;
			-webkit-flex-basis: auto;
			-ms-flex-basis: auto;
			flex-basis: auto;
			height: 33rem;
		}

		.panel.banner.right {
			-moz-flex-direction: column-reverse;
			-webkit-flex-direction: column-reverse;
			-ms-flex-direction: column-reverse;
			flex-direction: column-reverse;
		}

	}

/* Panel (Spotlight) */

	.panel.spotlight {
		-moz-align-items: -moz-stretch;
		-webkit-align-items: -webkit-stretch;
		-ms-align-items: -ms-stretch;
		align-items: stretch;
		position: relative;
	}

		.panel.spotlight > * {
			z-index: 1;
		}

		.panel.spotlight .content {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			padding: 3.5rem 3.5rem 2rem 3.5rem ;
		}

		.panel.spotlight .image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
		}

			.panel.spotlight .image img {
				-moz-object-fit: cover;
				-webkit-object-fit: cover;
				-ms-object-fit: cover;
				object-fit: cover;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

		.panel.spotlight.left {
			-moz-justify-content: -moz-flex-start;
			-webkit-justify-content: -webkit-flex-start;
			-ms-justify-content: -ms-flex-start;
			justify-content: flex-start;
		}

			.panel.spotlight.left .content {
				background-image: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, var(--color-transp-dark) 30%, rgba(var(--color-dark-anthracite), 0.175) 50%); /* Angepasst */
			}

		.panel.spotlight.right {
			-moz-justify-content: -moz-flex-end;
			-webkit-justify-content: -webkit-flex-end;
			-ms-justify-content: -ms-flex-end;
			justify-content: flex-end;
		}

			.panel.spotlight.right .content {
				background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--color-transp-dark) 30%, rgba(var(--color-dark-anthracite), 0.175) 50%); /* Angepasst */
			}

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

		.panel.spotlight .content {
			display: none;
		}

		.panel.spotlight .content {
			padding: 2.8875rem 1.75rem 1.3875rem 1.75rem ;
			-moz-flex-direction: column !important;
			-webkit-flex-direction: column !important;
			-ms-flex-direction: column !important;
			flex-direction: column !important;
			background-image: linear-gradient(0deg, rgba(var(--color-dark-anthracite), 0.25) 70%, rgba(var(--color-dark-anthracite), 0.175)) !important; /* Angepasst */
			min-height: 25rem;
		}

	}

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

		.panel.spotlight .content {
			min-height: 30rem;
		}

	}

/* Panel (Spotlight2) - NEU HINZUGEFÜGT UND ANGEPASST */
.panel.spotlight2 {
	display: none;
    -moz-align-items: stretch; /* Wichtig: Sorgt dafür, dass Bild- und Text-Container die gleiche Höhe haben */
    -webkit-align-items: stretch;
    -ms-align-items: stretch;
    align-items: stretch;
    height: auto; /* Die Höhe wird dynamisch vom Inhalt bestimmt */
    overflow: hidden;
}

    .panel.spotlight2 .image-panel {
        -moz-flex-grow: 0;
        -webkit-flex-grow: 0;
        -ms-flex-grow: 0;
        flex-grow: 0;
        -moz-flex-shrink: 0;
        -webkit-flex-shrink: 0;
        -ms-flex-shrink: 0;
        flex-shrink: 0;
        position: relative;
        /* Die Breite wird per JavaScript gesetzt, oder durch content-panel festgelegt */
        width: auto; /* Standardmäßig auto */
		min-width: 0;
    }

	.panel.spotlight2 .image-panel img {
		-moz-object-fit: cover; /* NEU: Bild füllt den Container, wird ggf. beschnitten */
		-webkit-object-fit: cover;
		-ms-object-fit: cover;
		object-fit: cover;
		-moz-object-position: center; /* Bild wird zentriert */
		-webkit-object-position: center;
		-ms-object-position: center;
		object-position: center;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

    .panel.spotlight2 .content-panel {
		padding: 3.5rem 3.5rem 2rem 3.5rem;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		-moz-flex-grow: 1; /* Lässt den Text-Container den restlichen Platz einnehmen */
		-webkit-flex-grow: 1;
		-ms-flex-grow: 1;
		flex-grow: 1;
		-moz-flex-shrink: 1; /* Erlaubt dem Text-Container zu schrumpfen */
		-webkit-flex-shrink: 1;
		-ms-flex-shrink: 1;
		flex-shrink: 1;
		min-width: 0;
        /* Die Breite des content-panel wird über span-Klassen im HTML gesteuert */
    }

    /* Textfarbe für spotlight2, wenn es eine helle Hintergrundfarbe hat (z.B. color3) */

    .panel.spotlight2.left {
        -moz-flex-direction: row;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .panel.spotlight2.right {
        -moz-flex-direction: row-reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }

    /* Mobile Anpassungen für spotlight2 - JETZT UNTEREINANDER */
@media screen and (max-width: 550px) {

    /* ===== TEIL 1: RESET ===== */
    /* Wir zwingen alle Elemente, sich normal zu verhalten und nicht übereinander zu liegen. */
    .panel.spotlight2,
    .panel.spotlight2 .image-panel,
    .panel.spotlight2 .content-panel,
    .panel.spotlight2 .image-panel img {
        position: static !important; /* BEFEHL: HÖRT AUF, EUCH ÜBER ANDERE ELEMENTE ZU LEGEN! */
    }


    /* ===== TEIL 2: UNSER WUNSCH-LAYOUT ===== */
    /* Dieses Layout sollte jetzt greifen, da der Reset die Blockade entfernt hat. */
    .panel.spotlight2 {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
    }

    .panel.spotlight2.right {
        flex-direction: row-reverse !important;
    }

    .panel.spotlight2 .image-panel {
        height: 18rem !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }

    .panel.spotlight2 .content-panel {
        flex-grow: 1 !important;
        width: auto !important;
        padding: 1.5rem !important;
    }

    .panel.spotlight2 .image-panel img {
        display: block !important;
        height: 100% !important;
        width: auto !important;
    }
}

/* Quote */
.quote-marquee {
    height: 6rem; 
	padding: 0rem 0rem 2rem 0rem;
    overflow: hidden; /* Verhindert, dass Text über den Rand hinausgeht */
    display: flex;
    align-items: center;
    justify-content: center;

}

@media screen and (max-width: 550px) { /* Media Query für mobile Geräte */
    .quote-marquee {
        height: 7rem; /* Eine größere Höhe für Mobilgeräte, an die längsten Zitate angepasst */
    }
}

/* Page Wrapper */

#page-wrapper {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -moz-justify-content: -moz-flex-start;
    -webkit-justify-content: -webkit-flex-start;
    -ms-justify-content: -ms-flex-start;
    justify-content: flex-start;
    -moz-flex-grow: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
    -moz-flex-shrink: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-shrink: 1;
    flex-shrink: 1;
    height: 100%;
    padding: 5rem;
}

    @media screen and (orientation: portrait) {

        #page-wrapper {
            padding-left: 2rem;
            padding-right: 2rem;
        }

    }

    @media screen and (min-aspect-ratio: 16 / 7) {

        #page-wrapper {
            padding: 6vh;
        }

    }

    @media screen and (min-aspect-ratio: 16 / 6) {

        #page-wrapper {
            padding: 0;
        }

    }

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

    #page-wrapper {
        height: auto;
        padding: 1rem;
    }

}

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

    #page-wrapper {
        padding: 0;
    }

}

/* Wrapper */

	#wrapper {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: row;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-moz-transition: opacity 1s ease-out, -moz-transform 0.75s ease-out;
		-webkit-transition: opacity 1s ease-out, -webkit-transform 0.75s ease-out;
		-ms-transition: opacity 1s ease-out, -ms-transform 0.75s ease-out;
		transition: opacity 1s ease-out, transform 0.75s ease-out;
		-moz-transition-delay: 0.25s;
		-webkit-transition-delay: 0.25s;
		-ms-transition-delay: 0.25s;
		transition-delay: 0.25s;
		cursor: default;
		position: relative;
		height: 32rem;
		box-shadow: 0 2rem 4rem 0.25rem rgba(46, 43, 55, 0.575);
	}

		#wrapper > .scrollZone {
			position: fixed;
			width: 6rem;
			height: inherit;
			cursor: -moz-grab;
			cursor: -webkit-grab;
			cursor: -ms-grab;
			cursor: grab;
			z-index: 10100;
		}

		#wrapper > .scrollZone.left {
			left: 0;
		}

		#wrapper > .scrollZone.right {
			right: 0;
		}
		
		
		#wrapper > .copyright {
			position: absolute;
			bottom: -3rem;
			right: 2rem;
			font-weight: 400;
			font-size: 1rem;
			color: rgb(0, 0, 0);
			margin-bottom: 0;
		}


			#wrapper > .copyright a:hover {
				color: inherit;
			}


		#wrapper.is-dragging {
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			user-select: none;
			cursor: -moz-grab;
			cursor: -webkit-grab;
			cursor: -ms-grab;
			cursor: grab;
		}

		#wrapper.is-dragging * {
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			user-select: none;
			}

		#wrapper.is-dragging * {
			cursor: -moz-grab;
			cursor: -webkit-grab;
			cursor: -ms-grab;
			cursor: grab;
		}

		#wrapper.is-dragged * {
			pointer-events: none;
		}
		body.is-preload #wrapper {
			-moz-transform: translateX(2rem);
			-webkit-transform: translateX(2rem);
			-ms-transform: translateX(2rem);
			transform: translateX(2rem);
			opacity: 0.01;
		}

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

		#wrapper {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			height: auto;
			margin: 0 0 5rem 0;
			box-shadow: 0 0.25rem 1.5rem 0.25rem rgba(46, 43, 55, 0.5);
			min-width: 0;
		}

			#wrapper > .copyright {
				display: block;
				right: 0rem;
				width: 100%;
				text-align: center;
			}

			body.is-preload #wrapper {
				-moz-transform: translateY(1rem);
				-webkit-transform: translateY(1rem);
				-ms-transform: translateY(1rem);
				transform: translateY(1rem);
			}

	}

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

		#wrapper {
			box-shadow: none;
		}

			body.is-preload #wrapper {
				-moz-transform: none;
				-webkit-transform: none;
				-ms-transform: none;
				transform: none;
			}


		}


/* Overlay Styles */

.layout-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(1, 1, 1, 0.85);
    z-index: 100000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.layout-overlay.is-visible {
    display: flex;
    opacity: 1;
    visibility: visible;
}						
.overlay-content {
    /* Layout aus deinem Original-Code (wichtig für Größe, Position, etc.) */
    background-color: var(--color-light-offwhite);
    color: var(--color-dark-anthracite);
    padding: 3.5rem 2.5rem 3.5rem 3.5rem;
    margin: 2rem;
    max-width: 50%;
    width: 90%;
    border-radius: 0.5rem;
    position: relative; /* <-- SEHR WICHTIG für den Schließen-Button */
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.4);
    max-height: calc(100vh - 4rem); /* <-- WICHTIG für die Höhe und das Scrollen */

    /* Funktionierende Scroll-Anweisung */
    overflow-y: auto;
}

/* --- Custom Scrollbar für das Overlay --- */
/* Für Firefox (kann so bleiben, schadet nicht) */
.overlay-content {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gold-accent) rgba(0, 0, 0, 0.1);
}

/* Für Chrome, Edge, Safari */
.overlay-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.overlay-content::-webkit-scrollbar-thumb {
  background-color: var(--color-gold-accent);
  border-radius: 10px;

  /* Oben/Unten 5px Abstand, Links/Rechts nur 2px Abstand */
  border-width: 5px 2px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.1); /* Wichtig: Nimmt die Farbe des Tracks an */
}

.overlay-content::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-gold-darker);
}

.overlay-content::-webkit-scrollbar {
  width: 12px;
}
.overlay-content::-webkit-scrollbar-button {
  display: none;
}

/* Anpassung der Überschriften und Texte im Overlay, damit sie zur Farbe passen */
.overlay-content h1,					
.overlay-content h2,
.overlay-content h3,
.overlay-content h4,
.overlay-content h5,
.overlay-content p,
.overlay-content li {
    color: var(--color-dark-anthracite); /* Standardtextfarbe im Overlay */
}

.overlay-content h1.major:after,								
.overlay-content h2.major:after,
.overlay-content h3.major:after {
    background-color: rgba(0, 0, 0, 0.25); /* Farbe des Strichs unter Überschriften */
}

.overlay-content a {
    color: var(--color-gold-accent); /* Linkfarbe im Overlay */
    border-bottom: dotted 1px rgba(0, 0, 0, 0.25); /* Unterstrich der Links */
}

.overlay-content a:hover {
    color: var(--color-gold-darker);
    border-bottom-color: transparent;
}


.overlay-close-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--color-dark-anthracite); /* Farbe des X-Buttons */
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out;
    z-index: 10; /* Sicherstellen, dass der Button klickbar ist */
}

.overlay-close-button:hover {
    opacity: 1;
}

/* Responsive Anpassungen für Overlays */
@media screen and (max-width: 550px) {
    .overlay-content {
        padding: 2rem;
        margin: 1rem;
        max-width: unset; /* Auf kleineren Bildschirmen keine feste Max-Breite */
        width: calc(100% - 2rem); /* Volle Breite minus Margin */
    }
    .overlay-close-button {
        font-size: 2rem;
    }
}

@media screen and (max-width: 480px) {
    .overlay-content {
        padding: 1.5rem;
        margin: 0.5rem;
        width: calc(100% - 1rem);
    }
}

/* Standard (Desktop): Element ist unsichtbar */
.mobile-br {
	display: none;
}

/* Regel für mobile Ansicht: Element wird sichtbar */
@media screen and (max-width: 550px) {
	.mobile-br {
		display: block;
	}
}

@media screen and (max-height: 450px) {

	html {
		font-size: 2.5vmin;
	}

}