/*
Theatergruppe Dellmensingen
creation Date: 2026-09-24
Author: Sebastian Osinski
http://www.sebbi.net
https://ddm-friends.de
*/

/* ===========================================================================
   KOPFBEREICH

   Masse aus dem Layout (1920px): Logo 165px breit, 50px unter der
   Fensterkante, rechte Kante 77px vom Rand. Darunter nach 42px das Menue,
   rechtsbuendig, Bodoni Regular 28px auf 40px Zeilenabstand. Alle Werte
   wachsen mit der Fensterbreite (vw), damit der Kopf im weissen Keil neben
   dem Buehnenbild bleibt - der Keil wird mit dem Fenster schmaler.

   Ab 1320px abwaerts entfaellt die Leiste; es bleiben Logo und die runde
   Menueschaltflaeche darunter, die ein Vollbildmenue oeffnet. Auf dem
   Desktop erscheint dieselbe Schaltflaeche, sobald der Kopf weggescrollt
   ist (html.ddm_scrolled, gesetzt von header.js).
   =========================================================================== */

:root{
	--hdr-top: clamp(24px, 2.6vw, 50px);
	--hdr-right: clamp(16px, 4vw, 77px);
	--hdr-logo: clamp(96px, 8.6vw, 165px);
	--hdr-gap: clamp(18px, 2.2vw, 42px);
	--hdr-font: clamp(19px, 1.46vw, 28px);

	--hdr-btn: 56px;
	--hdr-btn-top: 24px;
	--hdr-btn-right: clamp(16px, 2vw, 40px);

	--hdr-ease: cubic-bezier(.16, 1, .3, 1);
}



/* ===== SPRUNGLINK =====
   Nur fuer die Tastatur: erscheint beim ersten Tab oben links. */
.ddm_skip{
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 120;
	padding: 10px 18px;
	background-color: var(--color-black);
	color: var(--color-white);
	font-size: 16px;
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform 200ms ease;
}
.ddm_skip:focus{
	transform: translateY(0px);
}
#content-wrapper:focus{
	outline: none;
}



/* ===== KOPF ===== */
.ddm_header{
	position: absolute;
	top: var(--hdr-top);
	right: var(--hdr-right);
	z-index: 11;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--hdr-gap);
	animation: ddm_hdr_in 1000ms 300ms var(--hdr-ease) both;
}
.ddm_header_logo{
	display: block;
	width: var(--hdr-logo);
	line-height: 0px;
}
.ddm_header_logo img{
	display: block;
	width: 100%;
	height: auto;
}

.ddm_header_nav ul{
	margin: 0px;
	padding: 0px;
	list-style: none;
	text-align: right;
}
.ddm_header_nav li{
	margin: 0px;
	padding: 0px;
}
.ddm_header_nav a{
	display: inline-block;
	color: var(--color-black);
	font-family: var(--font-serif);
	font-weight: var(--weight-termine);
	font-size: var(--hdr-font);
	line-height: 1.44;
	text-decoration: none;
	white-space: nowrap;
	transition: color 200ms ease;
}
.ddm_header_nav a:hover,
.ddm_header_nav a:focus-visible{
	color: var(--color-pink);
}
/* Die Unterstrichlinie (template.css) sitzt sonst auf der Unterlaenge */
.ddm_header_nav a::after{
	bottom: 0.18em;
}



/* ===== MENUESCHALTFLAECHE =====
   Rund und pink, damit sie auf dem dunklen Buehnenbild ebenso steht wie auf
   Weiss; der duenne weisse Ring trennt sie vom pinken Band der
   Ankuendigungen. Geoeffnet wird sie zum Schliessen-Kreuz. */
.ddm_menu_toggle{
	position: fixed;
	top: var(--hdr-btn-top);
	right: var(--hdr-btn-right);
	z-index: 95;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--hdr-btn);
	height: var(--hdr-btn);
	margin: 0px;
	padding: 0px;
	border: 0px none;
	border-radius: 50%;
	background-color: var(--color-pink);
	box-shadow: 0px 0px 0px 2px var(--color-white);
	color: var(--color-white);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: top 500ms var(--hdr-ease), opacity 300ms ease, visibility 300ms ease, transform 500ms var(--hdr-ease), background-color 200ms ease;
}
/* nur mit Maus - auf Touchgeraeten bliebe :hover nach dem Tippen haengen */
@media (hover: hover){
	.ddm_menu_toggle:hover{
		background-color: var(--color-black);
	}
	.ddm_menu_open .ddm_menu_toggle:hover{
		background-color: var(--color-white);
		color: var(--color-black);
	}
}
.ddm_menu_toggle:focus-visible{
	outline: 2px solid var(--color-black);
	outline-offset: 4px;
}
.ddm_menu_toggle_bars{
	position: relative;
	display: block;
	width: 24px;
	height: 16px;
}
.ddm_menu_toggle_bars > span{
	position: absolute;
	right: 0px;
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 1px;
	background-color: currentColor;
	transition: transform 400ms var(--hdr-ease), width 300ms ease, opacity 200ms ease, top 400ms var(--hdr-ease);
}
.ddm_menu_toggle_bars > span:nth-child(1){ top: 0px; }
.ddm_menu_toggle_bars > span:nth-child(2){ top: 7px; width: 70%; }
.ddm_menu_toggle_bars > span:nth-child(3){ top: 14px; width: 85%; }
.ddm_menu_toggle:hover .ddm_menu_toggle_bars > span{
	width: 100%;
}

/* Desktop: erst sichtbar, wenn der Kopf weggescrollt ist */
@media (min-width: 1321px){
	html:not(.ddm_scrolled):not(.ddm_menu_open) .ddm_menu_toggle{
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px) scale(0.8);
	}
}

/* geoeffnet: Kreuz */
.ddm_menu_open .ddm_menu_toggle{
	top: var(--hdr-btn-top);
	box-shadow: none;
}
.ddm_menu_open .ddm_menu_toggle:focus-visible{
	outline-color: var(--color-white);
}
.ddm_menu_open .ddm_menu_toggle_bars > span{
	width: 100%;
	top: 7px;
}
.ddm_menu_open .ddm_menu_toggle_bars > span:nth-child(1){
	transform: rotate(45deg);
}
.ddm_menu_open .ddm_menu_toggle_bars > span:nth-child(2){
	opacity: 0;
}
.ddm_menu_open .ddm_menu_toggle_bars > span:nth-child(3){
	transform: rotate(-45deg);
}



/* ===== VOLLBILDMENUE =====
   Schwarze Buehne: Logo weiss oben links, die Punkte gross und
   rechtsbuendig wie in der Leiste, unten die Rechtsseiten. Kreis und Linien
   greifen die Formen des Intros auf. */
.ddm_menu{
	position: fixed;
	inset: 0px;
	z-index: 90;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	clip-path: circle(0px at calc(100% - var(--hdr-btn-right) - var(--hdr-btn) / 2) calc(var(--hdr-btn-top) + var(--hdr-btn) / 2));
	transition: clip-path 700ms var(--hdr-ease), opacity 300ms ease, visibility 0ms linear 700ms;
}
.ddm_menu_open .ddm_menu{
	visibility: visible;
	opacity: 1;
	clip-path: circle(150% at calc(100% - var(--hdr-btn-right) - var(--hdr-btn) / 2) calc(var(--hdr-btn-top) + var(--hdr-btn) / 2));
	transition: clip-path 800ms var(--hdr-ease), opacity 200ms ease, visibility 0ms linear 0ms;
}
.ddm_menu_open,
.ddm_menu_open body{
	overflow: hidden;
}

.ddm_menu_inner{
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: calc(var(--hdr-btn-top) + var(--hdr-btn) + 24px) var(--hdr-right) 32px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ddm_menu_logo{
	position: absolute;
	top: var(--hdr-btn-top);
	left: var(--hdr-right);
	display: block;
	width: clamp(72px, 7vw, 120px);
	line-height: 0px;
}
.ddm_menu_logo img{
	display: block;
	width: 100%;
	height: auto;
	filter: invert(1);
}

.ddm_menu_nav{
	margin-top: auto;
	margin-bottom: auto;
	padding: 24px 0px;
}
.ddm_menu_nav ul{
	margin: 0px;
	padding: 0px;
	list-style: none;
	text-align: right;
}
.ddm_menu_nav li{
	margin: 0px;
	padding: 0px;
	opacity: 0;
	transform: translateX(40px);
	transition: opacity 300ms ease, transform 300ms ease;
}
.ddm_menu_open .ddm_menu_nav li{
	opacity: 1;
	transform: translateX(0px);
	transition: opacity 600ms ease calc(150ms + var(--i) * 60ms), transform 900ms var(--hdr-ease) calc(150ms + var(--i) * 60ms);
}
.ddm_menu_nav a{
	position: relative;
	display: inline-block;
	padding: 0.08em 0px;
	color: var(--color-white);
	font-family: var(--font-serif);
	font-weight: var(--weight-headline);
	font-size: clamp(36px, 5.2vw, 84px);
	line-height: 1.12;
	text-decoration: none;
	transition: color 200ms ease;
}
/* Pinker Punkt vor dem Eintrag beim Ueberfahren und fuer den Abschnitt,
   in dem man gerade steht (._act, header.js) */
.ddm_menu_nav a::before{
	content: '';
	position: absolute;
	top: 50%;
	left: -0.55em;
	width: 0.2em;
	height: 0.2em;
	margin-top: -0.06em;
	border-radius: 50%;
	background-color: var(--color-pink);
	transform: scale(0);
	transition: transform 300ms var(--hdr-ease);
}
.ddm_menu_nav a:hover,
.ddm_menu_nav a:focus-visible,
.ddm_menu_nav a._act{
	color: var(--color-pink);
}
.ddm_menu_nav a:hover::before,
.ddm_menu_nav a:focus-visible::before,
.ddm_menu_nav a._act::before{
	transform: scale(1);
}
.ddm_menu_nav a:focus-visible{
	outline: none;
}

.ddm_menu_foot{
	display: flex;
	justify-content: flex-end;
	gap: 28px;
	opacity: 0;
	transition: opacity 300ms ease;
}
.ddm_menu_open .ddm_menu_foot{
	opacity: 1;
	transition: opacity 600ms ease 550ms;
}
.ddm_menu_foot a{
	color: var(--color-g);
	font-size: 15px;
	line-height: 22px;
	text-decoration: none;
}
.ddm_menu_foot a:hover,
.ddm_menu_foot a:focus-visible{
	color: var(--color-white);
}

/* Kreis und Linien: unten links angeschnitten, wie beim Intro */
.ddm_menu_deco{
	position: absolute;
	inset: 0px;
	z-index: 0;
	pointer-events: none;
}
.ddm_menu_circle{
	position: absolute;
	left: -10vmax;
	bottom: -16vmax;
	display: block;
	width: 44vmax;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	transform: scale(0.6);
	opacity: 0;
	transition: transform 600ms ease, opacity 300ms ease;
}
.ddm_menu_open .ddm_menu_circle{
	transform: scale(1);
	opacity: 1;
	transition: transform 1400ms var(--hdr-ease) 100ms, opacity 600ms ease 100ms;
}
.ddm_menu_lines{
	position: absolute;
	left: 30vmax;
	bottom: 3vmax;
	display: block;
	width: 16vmax;
	aspect-ratio: 372 / 452;
}
.ddm_menu_lines > span{
	position: absolute;
	display: block;
	width: 132.72%;
	height: 3px;
	transform-origin: 0% 50%;
	transform: rotate(-46.15deg) scaleX(0);
	transition: transform 300ms ease;
}
.ddm_menu_lines > span:nth-child(1){ left: 5.16%; top: 85.34%; }
.ddm_menu_lines > span:nth-child(2){ left: 2.9%; top: 93.18%; }
.ddm_menu_lines > span:nth-child(3){ left: 2.9%; top: 99.38%; }
.ddm_menu_open .ddm_menu_lines > span{
	transform: rotate(-46.15deg) scaleX(1);
	transition: transform 1100ms var(--hdr-ease) 400ms;
}
.ddm_menu_open .ddm_menu_lines > span:nth-child(2){ transition-delay: 480ms; }
.ddm_menu_open .ddm_menu_lines > span:nth-child(3){ transition-delay: 560ms; }



/* ===== AUFTRITT ===== */
@keyframes ddm_hdr_in{
	from{ opacity: 0; transform: translateY(-16px); }
	to{ opacity: 1; transform: translateY(0px); }
}



/* ===========================================================================
   RESPONSIVE
   Unter 1320px (Umschaltpunkt wie responsive.css) nur Logo und
   Schaltflaeche. Die Schaltflaeche steht zunaechst unter dem Logo und
   rueckt beim Scrollen an die obere Kante, wenn das Logo weg ist.
   =========================================================================== */
@media (max-width: 1320px){
	:root{
		--hdr-top: 20px;
		--hdr-right: clamp(16px, 3vw, 40px);
		--hdr-logo: clamp(64px, 9vw, 110px);
		--hdr-btn: 52px;
		--hdr-btn-top: 16px;
		--hdr-btn-right: var(--hdr-right);
	}
	.ddm_header_nav{
		display: none;
	}
	/* Mitte der Schaltflaeche unter der Mitte des Logos */
	html:not(.ddm_scrolled):not(.ddm_menu_open) .ddm_menu_toggle{
		top: calc(var(--hdr-top) + var(--hdr-logo) + 14px);
		right: calc(var(--hdr-right) + (var(--hdr-logo) - var(--hdr-btn)) / 2);
	}
	.ddm_menu_toggle{
		transition: top 500ms var(--hdr-ease), right 500ms var(--hdr-ease), background-color 200ms ease;
	}
}

/* Der weisse Keil neben dem Buehnenbild wird hier schmaler als das Logo;
   eine weisse Scheibe haelt es lesbar - rund wie das Siegel selbst. */
@media (max-width: 860px){
	:root{
		--hdr-top: 12px;
		--hdr-right: 12px;
		--hdr-logo: clamp(72px, 13vw, 96px);
		--hdr-btn: 48px;
		--hdr-btn-top: 14px;
	}
	.ddm_header_logo{
		box-sizing: border-box;
		padding: 8px;
		border-radius: 50%;
		background-color: var(--color-white);
		box-shadow: 0px 6px 24px color-mix(in srgb, var(--color-black) 18%, transparent);
	}
	.ddm_menu_inner{
		padding-left: 24px;
		padding-right: 24px;
	}
	.ddm_menu_logo{
		left: 24px;
	}
	/* Hochformat: Kreis an der Breite messen, sonst reicht er bis unter
	   die Rechtsseiten */
	.ddm_menu_circle{
		left: -18vw;
		bottom: -22vw;
		width: 70vw;
	}
	.ddm_menu_lines{
		left: 40vw;
		bottom: 4vw;
		width: 26vw;
	}
}

@media (prefers-reduced-motion: reduce){
	.ddm_header,
	.ddm_menu,
	.ddm_menu_nav li,
	.ddm_menu_circle,
	.ddm_menu_lines > span,
	.ddm_menu_toggle{
		animation: none !important;
		transition: none !important;
	}
}