@CHARSET "utf-8";

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

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

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

@font-face 
{
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
	   font-display: swap;
}

@font-face 
{
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
	   font-display: swap;
}

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

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

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

@font-face 
{
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
	   font-display: swap;
}

@font-face 
{
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'),
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
	   font-display: swap;
}



* {
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;

	margin:0;
	padding:0;
}

*:focus {
	outline: none;
}

:root {
	color-scheme: light only;

	--background_color: #818181;
	--background: radial-gradient(ellipse at center, #7d7e7d 0%,#0e0e0e 100%);

	--regular_font_familiy: 'Open Sans';
	--regular_font_size: 1.1rem;
	--regular_line_height : 2;
	--regular_font_color: white;

	--title_font_size: 4rem;
	--title_line_height : 1.13;

	--trans_std: all .3s ease-out;

	--page_content_padding : 3vmin;
	--page_content_padding_bottom : 5vmin;
	--page_navigation_padding : 7vmin;
	--page_inactive_opacity: 0.3;
	--page_change_opacity: opacity .3s ease-out;
	--footer_height: 10vmin;
	--footer_font_size: var(--regular_font_size);
	--footer_line_height: var(--regular_line_height);
	--footer_font_weight: 300;
	--footer_font_family: var(--regular_font_familiy);
	--footer_spacer : "|";
	--footer_spacer_margin : 5vmin;

	/* Definiert wie weit das Burger-Menu aufgeht. */
	--navigation_open_shift : 40vw;

	--logo-transition: all .3s ease-out;

	--navigation-transition: all .4s ease-in-out;
	--navigation_item_height: 3em;
	--navigation_font_size: 1.2rem;
	--navigation_line_height: 1.83;
	--navigation_highlight_background_color: rgba(255, 255, 255, 0.1);
	--navigation_active_background_color: var(--navigation_highlight_background_color);

	--control-panel-icon-width: 8vmin;
	--control-panel-icon-height: 8vmin;

	--content_default_drop_shadow: drop-shadow(1vmin 1vmin 2vmin rgba(0, 0, 0, 0.5));


	--overlay_background_color : rgba(0,0,0,0.5);
	--backdrop_blur :1em;
	/* Overlay-Paddings: oben Platz für die Navigation, rechts doppelt (Close-Icon) */
	--overlay_padding_top : calc(var(--page_navigation_padding) * 0.5); 
	--overlay_padding_right : calc(var(--page_content_padding) * 2);
	--overlay_padding_bottom : var(--page_content_padding_bottom);
	--overlay_padding_left : calc(var(--page_content_padding) * 2);
}

@supports (-webkit-touch-callout: default) {
	@media (pointer: coarse) {
		:root {
			--logo-transition: left .3s ease-out, top .3s ease-out, filter .3s ease-out;
		}
	}
}

@media(pointer: coarse), (orientation: portrait)
{
	:root {
		--navigation_open_shift : 100vw;
	}
}

@media(pointer: coarse) and (orientation: portrait)
{
	:root {
		--navigation_item_height: 4em;
		--navigation_font_size: 1.8rem;
		--control-panel-icon-width: 12vmin;
		--control-panel-icon-height: 12vmin;
		--page_content_padding_bottom : 30vmin;
	}
}

@media(orientation: portrait)
{
	:root {
		/* Das Mini-Logo ist im Hochformat höher, und der große page_navigation_padding
		   der Layouts gilt nur bei pointer:coarse — sonst läge der Titel unterm Logo.
		   Die 3em Innenabstand des Maskenblocks werden abgezogen, sonst stapeln sich
		   beide Abstände über dem Titel */
		--overlay_padding_top : calc(max(var(--page_navigation_padding), 22vmin) - 3em);
		/* Der große page_content_padding_bottom (30vmin mobil) ist für den Seiten-Scroll
		   gedacht — der Overlay-Inhalt scrollt intern und braucht unten nur normale Luft */
		--overlay_padding_bottom : var(--page_content_padding);
	}
}
 

body
{
	font-size: var(--regular_font_size);
	line-height: var(--regular_line_height);
}

body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	/*overflow: hidden; document-scroll komplett deaktivieren*/

	cursor: default;

	width: 100%;

	height: calc(100vh - var(--vh-offset, 0px));

	font-family: var(--regular_font_familiy);

	color: var(--regular_font_color);
	background: var(--background_color);
	background: var(--background)

}

h1
{
	font-size: var(--title_font_size);
	line-height: var(--title_line_height);
	text-transform: uppercase;
	text-shadow: .2em .2em 0.2em rgba(0,0,0,.3);
}

.pages {
	display: flex;
}

.pages.landscape {
	flex-wrap: nowrap;
	width: auto;
	height: 100vh;
}

.pages.portrait {
	flex-wrap: wrap;
	width: 100vw;
	height: auto;
}

.page {
	display: flex;
	width:100vw;
	/* background-color: #1e8449; */
	flex-shrink: 0;
	min-height: 100vh;
	min-height: 100dvh;
	align-items: center;
	justify-content: center;

	font-size: var(--regular_font_size);
	line-height: auto;

	box-sizing: border-box;

	padding: var(--page_content_padding);

	padding-left: calc(var(--footer_height) + var(--page_content_padding));

	opacity: var(--page_inactive_opacity);

	transition: var(--page_change_opacity);

	filter: blur(calc(var(--backdrop_blur) * 0.2));

}

.page.active {
	opacity: 1;
	filter: none
}

/* Unser wrapper für den Content innerhalb einer page */
/* .page div:nth-of-type(1)
{
	max-width: 100%;
	width: 100%;
} */

/* 
.page:nth-of-type(2n)
{
	background-color: #1a5276;
} */


/* .hud {
	position: fixed;
	left: 5vmin;
	top: 5vmin;
	
} */


.hud {
	position: fixed;
	bottom: 12px;
	right: 12px;
	z-index: 9999;
	background: rgba(0,0,0,0.8);
	color: #fff;
	font-family: monospace;
	font-size: 12px;
	line-height: 1.6;
	padding: 10px 14px;
	border-radius: 6px;
	pointer-events: none;
	min-width: 200px;
	display:none;
}
.hud-shift {
	color: yellow;
	font-weight: bold;
}

@property --mask-t0 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 0%;
}
@property --mask-t1 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 0%;
}
@property --mask-b0 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 100%;
}
@property --mask-b1 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 100%;
}

/*Scroll-Container als div: iOS scoped Snap-State pro Container.
	Nach DOM-Mutation + scrollTop-Kompensation kennt der div keinen
	alten document-weiten Gesture-State → kein Sprung auf falsche Seite.*/
.scroll-container {
	position: fixed;
	inset: 0;
	overflow-y: scroll;
	overflow-anchor: none; /*verhindert auto-scrollTop-Kompensation bei margin-Änderungen*/
	touch-action: none;    /*volle JS-Kontrolle — kein natives Scroll/Momentum*/
	overflow-x: hidden;
	mask-image: linear-gradient(transparent var(--mask-t0), black var(--mask-t1), black var(--mask-b0), transparent var(--mask-b1));
	-webkit-mask-image: linear-gradient(transparent var(--mask-t0), black var(--mask-t1), black var(--mask-b0), transparent var(--mask-b1));
	transition: left .3s ease-in, --mask-t0 .2s ease-out, --mask-t1 .2s ease-out, --mask-b0 .2s ease-out, --mask-b1 .2s ease-out;
	width:100vw;
	
}

.scroll-container.mask {
	--mask-t0: 5%;
	--mask-t1: 15%;
	--mask-b0: 90%;
	--mask-b1: 100%;
}



.scroll-area.bounce {
	transition: transform var(--bounce-ms, 400ms) cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media(pointer: fine)
{
	body:has(.navigation.burger:hover) .scroll-container
	{
		left: calc(var(--navigation_open_shift) * -1);
	}
}

body:has(.navigation.burger.open) .scroll-container
{
	left: calc(var(--navigation_open_shift) * -1);
}






	


.page.loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2rem;
	height: 2rem;
	margin: -1rem 0 0 -1rem;
	border: 3px solid rgba(255,255,255,0.15);
	border-top-color: rgba(255,255,255,0.7);
	border-radius: 50%;
	animation: page-spin 0.7s linear infinite;
}

@keyframes page-spin {
	to { transform: rotate(360deg); }
}


.page.load-error::after {
	content: '⚠';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2rem;
	opacity: 0.4;
}

.page.loading, .page.load-error {
	position: relative;
}






.navigation {
	max-width: 100vw;
	right: 2vmin;
	display: flex;
			
	position: fixed;
	top: 2vmin;	
	
	/* max-height: var(--navigation_item_height); */
	transition: var(--navigation-transition);
	flex-wrap: wrap;
	display:none;
	overflow: hidden;
}

.navigation.burger {
	display:flex;
}
.navigation.classic {
	display:flex;
}

@media(pointer: fine)
{
	.navigation:hover {
		max-height:30%;
	}

	/* Untermenupunkte bei hover aufklappen */
	.navigation:hover .element .item:not(:first-of-type)
	{
		opacity: 1;
		height: 3em;
	}
}

/* Touch: Unterpunkte per .expanded-Klasse aufklappen (kein hover auf Touch) */
.navigation .element.expanded .item:not(:first-of-type)
{
	opacity: 1;
	height: var(--navigation_item_height);
}

/* Classic Nav: max-height erweitern wenn ein element expanded ist */
.navigation.classic:has(.element.expanded)
{
	max-height: 30%;
}

.navigation * {
	transition: var(--trans_std)
}

/* Wrapper für Menupunkt */
.navigation .element {
	/* padding: 0.5rem 1rem ;*/
	/* Abstand zwischen den Menupunkten */
	margin-left: 0.5em;
	overflow: hidden;
	display:flex;
	justify-content: flex-start;
	align-items: flex-start;
			
	cursor: pointer;
	flex-flow: column;

	margin-bottom: 0.5rem;
	/* transition: var(--trans_std); */
}

.navigation.classic .element {
	opacity: 0;
	transform: translateY(-3em);
	transition: background .3s ease-out, opacity .3s ease-out, transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* effect ist die effekt-klasse damit die elemente reinfliegen in classic */
.navigation.classic.effect .element {
	opacity: 1;
	transform: translateY(0);
}



.navigation .element.active {
	background: var(--navigation_active_background_color);
}

.navigation .element:hover {
	background: var(--navigation_highlight_background_color);
}

/* Allg Einstelunngen für alle Menupunkte */
.element .item {
	/* min-width: 5rem; */
	height: var(--navigation_item_height);
	
	width:100%;
	display:flex;

	justify-content: center;
	align-items: center;
	background-color: transparent;


}

.element .item.active {
	background-color: var(--navigation_active_background_color);			
}

.element .item:hover {
	/* background-color: var(--navigation_highlight_background_color);	 */
	transform: scale(1.1);
}


/* Hauptmenupunkt */
.element .item:nth-of-type(1)
{			
	/* background-color: #14702a; */
}

/* Untermenupunkte */
.element .item:not(:first-of-type) {
	/* background-color: #701456; */
	/* padding: 1rem; */
	opacity: 0;
	height:0;
}

/* Alle p Elememnte der Navigation */
.element .item p {
	overflow:hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width:100%;
	padding:0.5em;
	text-transform: uppercase;
	font-size: var(--navigation_font_size);
	text-shadow: .1em .1em 0em rgba(0,0,0,.1);
	
}

/* Nur das Hauptmenupunkt p */
.element .item:nth-of-type(1) p {
	font-size: var(--navigation_font_size);		
	text-align: center;	
	margin: 1.5em;
}


/* Nur Untermenupunkt p */
.element .item:not(:first-of-type) p {
	font-size: var(--navigation_font_size);		
	text-align: left;	
	margin: .5em;
}

/*
@media(orientation: portrait)
{
	.navigation {
		display:none
	}
}
	*/

/* Wenn wir die classic Nav verwenden brauchen wir kein Burgericon */
body:has(.navigation.classic) #icon-nav 
{
	display:none
}

body:has(.navigation.open) .logo
{
	/* display:none */
}



/* Classic auf Burger */

.navigation.burger {
	width: var(--navigation_open_shift);
	height: 100vh;
	background: var(--background);
	max-height: initial;
	top: 0;
	right: calc(var(--navigation_open_shift) *-1 );
	align-content: flex-start;
	padding-top: 15vmin;
	box-shadow: inset 4rem 0rem 7rem -3rem rgba(0,0,0,0.4);

}

@media(orientation: portrait)
{
	.navigation.burger {
		padding-top: 35vmin;
	}
}

.navigation.burger.open {
	right: 0;
	
}



.navigation.burger .element {
	width:100%;
	margin:0;
	opacity: 0;
	transform: translateX(50vw);
	transition: opacity .3s ease-out, transform .5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.navigation.burger.open .element {
	opacity: 1;
	transform: translateX(0);
}

.navigation.burger:hover {
	max-height: initial
}

/* Hauptmenüpunkt */
.navigation.burger .element .item:not(:first-of-type) p
{
	text-align: center;
}

.control-panel {
	position: fixed;
	right: 5vmin;
	top: 5vmin;
	display: flex
}

.control-panel .icon,
.overlay .icon {
	width: var(--control-panel-icon-width);
	height: var(--control-panel-icon-height);
	cursor: pointer;
}

.overlay .icon {
	/* absolute reicht: das Overlay scrollt nicht (nur sein Inhaltsblock), und fixed
	   würde wegen des backdrop-filter ohnehin am Overlay hängen */
	position: absolute;
	right: var(--page_content_padding);
	top: var(--page_content_padding);
}

.icon div {
	width: 100%;
	height: 100%;
}


.logo-inner {
	width: 100%;
	height: 100%;
}

/* Diese Elemente liegen fixiert über dem Scroller und werden von der Scroll-Engine
   mitbedient. Ohne touch-action startet iOS dort seine eigene Geste (Dokument-
   Rubberband), bevor der touchmove-Handler sie unterbinden kann. */
.logo, .footer, .hud {
	touch-action: none;
}








.footer {
	position: fixed;
	left: var(--page_content_padding);
	bottom: calc(calc(var(--footer_height) - var(--page_content_padding))*-1);
	width: 90vh;
	height: var(--footer_height);
	
	transform: rotate(-90deg);
	transform-origin: left top;

	line-height: var(--footer_line_height);
	font-size: var(--footer_font_size);
	font-weight: var(--footer_font_weight);
	font-family: var(--footer_font_family);

	text-transform: uppercase;

	color: var(--navigation_highlight_background_color);
	mix-blend-mode: screen;
	transition: var(--trans_std);
	padding-left: 0.5em

}

.footer.min {
	transform: rotate(-90deg) scale(0.8);
}

/* Jedes Element */
.footer span
{
	display: inline-block;
	transition: var(--trans_std);
}

.footer span:hover
{
	transform: scale(1.1);
}




/* Jedes Element im Footer außer das erste */
.footer span:not(:first-of-type)
{
	
}
/* Trennerzeichen */
.footer span:not(:first-of-type)::before
{
	content: var(--footer_spacer);
	margin-left: var(--footer_spacer_margin);
	margin-right: var(--footer_spacer_margin);
}




.table {
	display:flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;	
	width: 80%
}

.table .tr {
	display:flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	flex-basis: 100%;
	margin-bottom: 1.5em;
}

.table .tr .td {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: nowrap;
	flex-basis: 50%; 
	/* fit-content; */
	flex-grow: 1;
}


.tr .td:nth-of-type(1) {
	flex-grow:0;
	font-weight: bold;
	text-transform: uppercase;
	color: var(--title_color);
}

@media(orientation: portrait) {
	.table .tr {
		flex-wrap: wrap;
		margin-bottom: 0.5em;
	}
	.table .tr .td {
		flex-basis: 100%; 
	}
}
/*─────────────────────────────────────────────────────────────────────────────
  OVERLAY (Impressum/Datenschutz) — geladen per open_overlay, Hash-Overlays
  siehe stories_page.overlays
─────────────────────────────────────────────────────────────────────────────*/

.overlay {
	display: flex;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	background-color: var(--overlay_background_color);
	backdrop-filter: blur(var(--backdrop_blur));
	animation: fade-in .3s ease-out forwards;
	/* Overlay-Padding-Variablen (siehe :root); ohne footer_height —
	   der Footer ist im Overlay nicht sichtbar */
	padding: var(--overlay_padding_top) var(--overlay_padding_right) var(--overlay_padding_bottom) var(--overlay_padding_left);
	box-sizing: border-box;
	/* Der Inhaltsblock scrollt intern — nicht das Overlay selbst: backdrop-filter
	   macht das Overlay zum Containing Block für fixed, ein mitscrollendes Overlay
	   nähme also auch das Close-X mit */
	overflow: hidden;

	/* Text markierbar machen — das globale user-select:none trifft jedes Element
	   einzeln, deshalb reicht die Freigabe am Container nicht */
	&, & * {
		user-select: text;
		-webkit-user-select: text;
		-webkit-touch-callout: default;
	}

	/* margin:auto statt justify/align center: zentriert bei Platz, bleibt bei
	   Überlauf aber an der Oberkante erreichbar statt oben abgeschnitten.
	   Innen das Page-Muster: Flex, Kinder teilen sich die Breite. */
	& > div {
		margin: auto;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		max-height: 100%;
		overflow-y: auto;
		/* Maskenblock-Paddings zählen in die max-height rein, sonst ist der Block
		   um die 6em höher als der Platz und läuft unten aus dem Overlay raus */
		box-sizing: border-box;
	}

	/* Verlaufsmaske gegen den harten Cut — Muster wie .scroll-container.mask;
	   die Klasse setzt update_overlay_mask nur, wenn der Inhalt wirklich scrollt.
	   Innenabstand im Scroll-Container: hält das erste/letzte Element ungescrollt
	   aus der Maske raus und läuft beim Scrollen mit weg. */
	& > div.mask {
		mask-image: linear-gradient(transparent 0, black 2em, black calc(100% - 2em), transparent 100%);
		-webkit-mask-image: linear-gradient(transparent 0, black 2em, black calc(100% - 2em), transparent 100%);
		padding-top: 3em;
		padding-bottom: 3em;
	}

	/* Zweispaltig wie bei den Pages (Muster hochzeitsmesse: Text links, Bilder rechts):
	   linke Spalte 50% mit Mittelabstand, rechte 40% wächst auf den Rest */
	& > div > .table {
		flex-basis: 40%;
		flex-grow: 1;
		min-width: 0;
	}

	& > div > .table:nth-of-type(1) {
		flex-basis: 50%;
		flex-grow: 0;
		margin-right: 1em;
	}

	/* Luft zwischen Label und Wert — bei halber Spaltenbreite stoßen sie sonst aneinander */
	& .table .tr {
		gap: 1em;
	}

	& h1 {
		color: var(--title_color);
		width:100%;
		text-align:center;
		margin-bottom: 1em;
	}

	/* Name über beide Tabellen (volle Zeile im Flex-Wrap) */
	& h2 {
		width: 100%;
		margin-bottom: 1.5em;
	}

	/* Links: Textfarbe behalten, Unterstreichung reicht als Erkennung.
	   text-transform bestimmt das Layout-CSS der Site (harzklub: überall uppercase) */
	& a {
		color: inherit;
	}
}

@media (orientation: portrait)
{
	/* Einspaltig — der Inhaltsblock scrollt, Länge ist hier egal.
	   nth-of-type mit aufführen: die 50%-Regel der ersten Tabelle aus dem
	   Querformat ist sonst spezifischer und gewinnt. */
	.overlay > div > .table,
	.overlay > div > .table:nth-of-type(1) {
		flex-basis: 100%;
		flex-grow: 1;
		margin-right: 0;
	}
}

@keyframes fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.icon.close {
	/* Pfad relativ zur CSS-Datei — in index.php war es relativ zum Dokument */
	background: url(../images/close_delete.svg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

/* Fließtext-Inhalte im Overlay (z.B. Datenschutz): voller Breite, Blockfluss */
.overlay .privacy-content {
	width: 100%;
}

.overlay .privacy-content h2 {
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

.overlay .privacy-content p,
.overlay .privacy-content ul {
	margin-bottom: 1em;
}

/* Der globale Reset nimmt ul das Padding — ohne das verschwinden die Bullets */
.overlay .privacy-content ul {
	padding-left: 1.5em;
}