/* Ergänzungen zu style.css: Aufklappbereiche, Buttons, Profil-Galerie. */

/* Aufklappbereich: natives <details>/<summary> */
summary.accordion__heading {
	display: flex;
	align-items: center;
	padding: 0.44em 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
}
summary.accordion__heading::-webkit-details-marker {
	display: none;
}
.accordion__title {
	flex: 1;
}
.accordion__icon {
	transition: transform 0.2s;
}
details[open]:not([data-closing]) .accordion__icon {
	transform: rotate(45deg);
}
/* Jeder Button ist ein eigener Block – nebeneinander anordnen */
.block-buttons {
	display: inline-flex;
	margin-right: 0.5rem;
}

/* Profil-Galerie */
.profile-gallery-outer {
	position: relative;
}
.profile-gallery-item {
	cursor: pointer;
}

/* ===== Personen-Einzelseite: Bilder starten direkt oben ===== */
.template-person .site-main {
	padding-top: 0;
}
.template-person .profile-gallery {
	padding-top: 0;
}

/* ===== Projekt-Einzelseite ===== */
.template-project .site-main {
	padding-top: 0;
}

/* Schwarzer Verlauf oben (.site-main:before) über der Inhaltsfläche,
   aber unter dem Logo (z-index 99999) */
.template-project .site-main:before {
	z-index: 3;
}

/* Video bzw. Titelbild: fest oben im Fenster, startet bildschirmfüllend.
   project-media.js verkleinert es beim Scrollen, bis das ganze Bild zu sehen ist. */
.project-media {
	--project-media-start: 100svh;
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 0;
	width: 100%;
	height: var(--project-media-start);
	margin: 0;
	overflow: hidden;
	background: black;
	transform: translateX(-50%);
}
.project-media__item {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.project-video .project-media__item {
	cursor: pointer;
	touch-action: manipulation; /* Doppeltipp löst zuverlässig dblclick aus */
}
.project-video .project-media__item:fullscreen {
	object-fit: contain;
}

/* Titel-Intro: 2 Sekunden sichtbar, dann ausblenden */
.project-intro {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--project-media-start, 100svh);
	padding: 0 2rem;
	font-size: 10vw;
	font-weight: 700;
	line-height: 0.9;
	text-align: center;
	color: white;
	text-shadow:
		0 0 0.03em rgba(250, 250, 250, 1),
		0 0 0.03em rgba(250, 250, 250, 1),
		0 0 0.05em rgba(250, 250, 250, 1);
	pointer-events: none;
	animation: project-intro-out 0.8s ease 2s forwards;
}
@keyframes project-intro-out {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

/* Inhaltsfläche: beginnt unter dem Video und gleitet darüber */
.project-sheet {
	position: relative;
	z-index: 2;
	padding: 0.5rem 0 4rem;
	background: black;
}
.project-sheet.has-media {
	margin-top: var(--project-sheet-start, var(--project-media-start));
}
.project-sheet:not(.has-media) {
	padding-top: 25vh;
}
.template-project .site-footer {
	position: relative;
	z-index: 2;
	margin-top: 0;
	background: linear-gradient(180deg, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%), black;
}

/* Sound/Fullscreen auf Projektseiten: über dem Video, unter der Inhaltsfläche
   (die schiebt sich darüber). Position setzt project-media.js. */
/* Sound/Fullscreen: im Video-Container, unten rechts. Wandert ohne JavaScript
   mit der Unterkante des Videos mit. Solange das Video noch bis unter die
   Browserleiste reicht, bleiben die Buttons über dem Menü (3.5rem über der
   sichtbaren Unterkante = 100svh). */
.template-project .project-controls {
	position: absolute;
	right: 2rem;
	bottom: max(1rem, calc(100% - 100svh + 3.5rem));
	z-index: 1;
}

/* Titelzeile */
.project-header .entry-title {
	margin-top: 0;
}
@media (min-width: 1000px) {
	.project-header .entry-title {
		max-width: 50vw;
	}
}

/* Handy: Titel, Meta, Text untereinander.
   Desktop wie bei Personen: links der Titel,
   rechts oben die Meta-Angaben, darunter der Text. */
.project-text {
	margin-top: 0.5rem;
}
.project-aside {
	padding: 0 2rem;
}
@media (min-width: 1000px) {
	.project-layout {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
	.project-header {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
	.project-aside {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
		padding-left: 0;
	}
	.project-text {
		grid-column: 2;
		grid-row: 2;
		margin-top: 0.75rem;
		padding-left: 0;
	}
}

/* Meta-Angaben hintereinander in einer Zeile: Jede Einheit (Bezeichnung + Wert)
   ist ein Block und bricht nur als Ganzes in die nächste Zeile um. Nur wenn eine
   Einheit allein breiter ist als die Zeile, bricht sie in sich um. */
.project-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.1rem 1.25rem;
	margin: 0.25rem 0 0;
}
.project-meta__row {
	display: flex;
	flex: 0 1 auto;
	align-items: flex-start;
	gap: 0.4rem;
	max-width: 100%;
}
.project-meta dt,
.project-meta dd {
	margin: 0;
	padding: 0;
}
.project-meta dt {
	flex: none;
	font-size: 0.6rem;
	line-height: 1.6;
}
.project-meta a {
	text-decoration: none;
}
/* Besetzung/Lehrende als Fließtext mit Komma statt untereinander */
.project-people {
	display: inline;
	margin: 0;
	padding: 0;
	list-style: none;
}
.project-people li {
	display: inline;
}
.project-people li:not(:last-child)::after {
	content: ", ";
}

/* Bilder über die volle Breite unter dem Zweispalter */
.project-images {
	display: grid;
	gap: 1rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}
.project-images img {
	display: block;
	width: 100%;
	height: auto;
}

/* ===== Projekt-Übersicht: Kacheln 16:9, Titel darunter ===== */
.project-list {
	display: grid;
	gap: 2rem 1rem;
	margin: 0;
	padding: 0 2rem;
	list-style: none;
}
@media (min-width: 1000px) {
	.project-list {
		grid-template-columns: repeat(3, 1fr);
	}
}
.project-teaser {
	display: block;
	color: inherit;
	text-decoration: none;
}
.project-teaser__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin-bottom: 0.5rem;
	background: #111;
}
.project-teaser__title,
.project-teaser__meta {
	display: block;
	font-size: 1rem;
	line-height: 1.2;
}
.project-teaser__title {
	font-weight: 700;
}
.project-teaser__meta {
	color: white;
}

/* Sprachumschalter: rechts, auf Höhe des Hauptmenüs.
   .main-navigation hat 1.5rem Abstand zum Rand, + 0.5rem = 2rem */
.main-navigation .language-switch {
	position: absolute;
	right: 0.5rem;
	bottom: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Hauptmenü: endet vor dem Sprachumschalter (links gleich viel Abstand, damit es
   mittig bleibt). Passt es nicht auf den Bildschirm, wird es seitlich wischbar und
   beginnt links, statt abgeschnitten zu werden („safe center“). */
.main-navigation #primary-menu {
	justify-content: safe center;
	/* Innen Luft für den Leuchtschein des aktiven Punkts (sonst schneidet
	   overflow ihn ab), oben/unten per negativem Außenabstand ausgeglichen */
	margin: -1rem 4rem;
	padding: 1rem 0.5rem;
	overflow-x: auto;
	scrollbar-width: none;
}
.main-navigation #primary-menu::-webkit-scrollbar {
	display: none;
}
@media (max-width: 999px) {
	/* Handy: links bündig mit dem Seitenrand */
	.main-navigation #primary-menu {
		margin-left: 0.5rem;
	}
}

/* Sound/Fullscreen: gleicher Hover-Effekt wie Menü und Sprachumschalter (a:hover) */
.start-video-controls button:hover {
	text-shadow:
		0 0 0.6em rgba(250, 250, 250, 1),
		0 0 0.3em rgba(250, 250, 250, 0.7),
		0 0 0.03em rgba(250, 250, 250, 0.5);
}
.start-video-controls button:focus-visible {
	outline: 4px solid red;
}

/* ===== Kontaktformular (Profilseite) ===== */
/* Personenseite: Handy alles untereinander. Desktop links Name, rechts
   Steckbrief, darunter der Text über die volle Breite. */
.person-layout .person-bio {
	margin-top: 0.75rem;
}
@media (min-width: 1000px) {
	.person-layout .entry-header {
		position: static;
		grid-column: 1;
		grid-row: 1;
	}
	.person-layout .profile-card {
		grid-column: 2;
		grid-row: 1;
	}
	.person-layout .person-bio {
		grid-column: 1 / -1;
		padding-left: 2rem;
	}
	.person-layout .person-bio {
		margin-top: 0.5rem;
	}
}
/* Abstand zwischen Steckbrief und Text regelt .person-bio */
.profile-table {
	margin: 0;
}
/* Senden-Button zentriert unter dem Formular */
.contact-form__footer .block-buttons {
	display: flex;
	justify-content: center;
	margin-right: 0;
}
/* Beschriftung steht als Platzhalter im Feld (das <label> bleibt für Screenreader
   erhalten). Felder in der Optik der Buttons im Hover-Zustand. */
.contact-form__field {
	margin-bottom: 0.75rem;
}
.contact-form__footer {
	padding-top: 0.25rem;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0.375rem 0.75rem;
	border: 0;
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(1rem);
	backdrop-filter: blur(1rem);
	box-shadow: 0 0 0.5em rgba(250, 250, 250, 1);
	color: white;
	font: inherit;
}
/* Beschriftung als Platzhalter im Feld, kleiner als die Eingabe (1rem) */
.contact-form ::placeholder {
	color: white;
	opacity: 1;
	font-weight: 700;
	font-size: 0.8rem;
}
.contact-form input:focus,
.contact-form textarea:focus {
	color: white;
	outline: 2px solid white;
	outline-offset: 0;
}
.contact-form textarea {
	resize: vertical;
}
/* Desktop: links Name, E-Mail, Betreff – rechts die Nachricht über dieselbe
   Höhe. Datenschutz und Button gehen über beide Spalten. */
@media (min-width: 1000px) {
	.contact-form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem 1rem;
	}
	.contact-form__field {
		margin-bottom: 0;
		grid-column: 1;
	}
	.contact-form__field--message {
		grid-column: 2;
		grid-row: 1 / span 3;
		display: flex;
		flex-direction: column;
		/* Eigene Höhe zählt nicht – die drei Felder links bestimmen sie */
		contain: size;
	}
	.contact-form__field--message textarea {
		flex: 1;
		min-height: 0;
		resize: none;
	}
	.contact-form__footer {
		grid-column: 1 / -1;
	}
}
.contact-panel p {
	text-indent: 0;
}

/* ===== Kontakt-Panel: zentriert, fährt von rechts herein ===== */
.contact-panel {
	box-sizing: border-box;
	width: min(48rem, calc(100vw - 2rem));
	max-width: none;
	max-height: calc(100svh - 2rem);
	margin: auto; /* im Viewport zentriert */
	padding: 1rem 1.25rem 1.25rem;
	overflow: auto;
	border: 0;
	border-radius: 1.5rem;
	background: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(1rem);
	backdrop-filter: blur(1rem);
	box-shadow: 0 0 0.5em rgba(250, 250, 250, 1);
	color: white;
	/* Ein- und Ausfahren */
	transform: translateX(calc(50vw + 50%));
	transition: transform 0.4s ease, overlay 0.4s allow-discrete, display 0.4s allow-discrete;
}
.contact-panel[open] {
	transform: none;
}
@starting-style {
	.contact-panel[open] {
		transform: translateX(calc(50vw + 50%));
	}
}
.contact-panel::backdrop {
	background: rgba(0, 0, 0, 0.3);
	transition: background-color 0.4s, overlay 0.4s allow-discrete, display 0.4s allow-discrete;
}
@starting-style {
	.contact-panel[open]::backdrop {
		background: rgba(0, 0, 0, 0);
	}
}
@media (prefers-reduced-motion: reduce) {
	.contact-panel,
	.contact-panel::backdrop {
		transition: none;
	}
}
.contact-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.75rem;
}
.contact-panel__title {
	margin: 0;
	font-size: 1rem;
}
.contact-panel__close {
	padding: 0.125em 1rem;
	border: 0;
	border-radius: 1rem;
	background: white;
	color: black;
	font: inherit;
	line-height: inherit;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.contact-panel__close:hover,
.contact-panel__close:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	color: white;
	box-shadow: 0 0 0.5em rgba(250, 250, 250, 1);
}
.contact-panel__close:focus-visible {
	outline: 2px solid white;
	outline-offset: 2px;
}
.contact-form__error {
	margin: 0.25rem 0 0;
	font-size: 0.8rem;
}
.contact-form__notice {
	margin: 0 0 1rem;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	background: white;
	color: black;
}
.contact-form__notice--error {
	background: #ff0000;
	color: white;
}
.contact-form__privacy {
	/* Als Block zentriert, der Text darin bleibt linksbündig */
	width: fit-content;
	margin: 0 auto 0.5rem;
	text-align: left;
	color: white;
	font-size: 0.6rem;
	line-height: 1.1em;
}
.contact-form__privacy a {
	text-decoration: underline;
}
/* Gleiche Optik wie die Buttons im Inhalt */
.contact-form__submit {
	padding: 0.125em 1rem;
	border: 0;
	border-radius: 1rem;
	background: white;
	color: black;
	font: inherit;
	line-height: inherit;
	cursor: pointer;
	box-shadow: 0 0 0.18em rgba(250, 250, 250, 1),
		0 0 0.1em rgba(250, 250, 250, 0.7),
		0 0 0.05em rgba(250, 250, 250, 0.5);
}
.contact-form__submit:focus-visible {
	outline: 2px solid white;
	outline-offset: 2px;
}
/* Honeypot aus dem Sichtfeld schieben (nicht display:none, das erkennen Bots) */
.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Button im Steckbrief, springt zum Kontaktformular */
.profile-contact-button {
	display: inline-block;
	padding: 0.125em 1rem;
	border-radius: 1rem;
	background: white;
	color: black;
	text-decoration: none;
	box-shadow: 0 0 0.18em rgba(250, 250, 250, 1),
		0 0 0.1em rgba(250, 250, 250, 0.7),
		0 0 0.05em rgba(250, 250, 250, 0.5);
}
.entry-content a.profile-contact-button {
	text-decoration: none;
}
.profile-contact-button:focus-visible {
	outline: 2px solid white;
	outline-offset: 2px;
}

/* Buttons im Inhalt: beim Hover transparent mit Blur und weißem Leuchten,
   wie die aktiven Menüpunkte */
.block-buttons a,
.profile-contact-button,
.contact-form__submit {
	transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.block-buttons a:hover,
.block-buttons a:focus-visible,
.profile-contact-button:hover,
.profile-contact-button:focus-visible,
.contact-form__submit:hover,
.contact-form__submit:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(1rem);
	backdrop-filter: blur(1rem);
	color: white;
	box-shadow: 0 0 0.5em rgba(250, 250, 250, 1);
}

/* ===== People-Übersicht: nach Jahrgang gruppiert, Kacheln 3:4 =====
   Handy: Gruppen untereinander, je 3 Spalten.
   Desktop: 9-Spalten-Raster, Gruppen liegen nebeneinander und sind
   höchstens 3 Spalten breit (--people-span kommt aus dem Template). */
.people-groups {
	padding: 0 2rem;
}
.people-group {
	margin-bottom: 2rem;
}
.people-group__title {
	margin: 0 0 0.5rem;
}
.people-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 1000px) {
	.people-groups {
		display: grid;
		grid-template-columns: repeat(9, 1fr);
		gap: 2rem 0.5rem;
		align-items: start;
	}
	.people-group {
		grid-column: span var(--people-span, 3);
		margin-bottom: 0;
	}
	/* Gleicher Spaltenabstand wie außen, damit alle Kacheln auf einem Raster liegen */
	.people-grid {
		grid-template-columns: repeat(var(--people-span, 3), 1fr);
	}
}
.people-teaser {
	display: block;
	color: inherit;
	text-decoration: none;
}
.people-teaser__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	margin-bottom: 0.25rem;
	background: #111;
}
.people-teaser__name {
	display: block;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.1em;
}

/* ===== Mobile Safari: Vollflächiges reicht bis hinter die Browserleisten =====
   Mit viewport-fit=cover (Meta-Tag im Header) darf die Seite unter die Leisten.
   100lvh ist die Höhe bei eingeklappten Leisten – so hören Video und Vorhänge
   nicht über der Leiste auf. Fixierte Elemente mit bottom (Menü, Steuerung)
   bleiben trotzdem über der sichtbaren Unterkante. */
html {
	background: black;
}
.template-home .start-video-wrap {
	inset: 0 0 auto;
	height: 100vh;
	height: 100lvh;
}
.template-home .start-bg-video {
	width: 100vh;
	width: 100lvh;
}
@media (min-width: 1024px), (hover: hover) and (pointer: fine), (orientation: landscape) and (max-width: 1023px) {
	.template-home .start-bg-video {
		width: 100%;
		height: 100vh;
		height: 100lvh;
	}
}
#curtain-news,
#curtain-dates {
	bottom: auto;
	height: 100vh;
	height: 100lvh;
	min-block-size: 0;
}
/* Letzte Einträge der Vorhänge nicht hinter der Browserleiste verstecken */
#curtain-news > *,
#curtain-dates > * {
	padding-block-end: calc(100lvh - 100svh + env(safe-area-inset-bottom));
}
.project-media {
	--project-media-start: 100lvh;
}
/* Menü nicht unter den Home-Balken rutschen lassen (z. B. im Querformat) */
.main-navigation {
	bottom: max(1rem, env(safe-area-inset-bottom));
}

/* Mobil: Verlauf unten (schwarz → transparent), Gegenstück zum Verlauf oben.
   Liegt über dem Inhalt, aber unter Vorhängen und Menü. */
@media (max-width: 999px) {
	.site-main:after {
		position: fixed;
		z-index: 3;
		left: 0;
		right: 0;
		bottom: 0;
		height: 8rem;
		content: "";
		background: black;
		-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0));
		mask-image: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0));
		pointer-events: none;
	}
	/* Startseite hat oben auch keinen Verlauf – Video bleibt frei */
	.template-home .site-main:after {
		content: none;
	}
}

/* Mobil: größere Tippfläche für die News-/Termine-Buttons, ohne die Optik zu
   ändern. Der Button ist um -90° gedreht, oben/unten des Buttons entspricht
   links/rechts auf dem Bildschirm – so ragt die Fläche weiter in den Inhalt. */
@media (max-width: 999px) {
	.curtain-toggle {
		position: relative;
	}
	.curtain-toggle::after {
		content: "";
		position: absolute;
		inset: -0.75rem -0.25rem;
	}
}

/* Steckbrief wie die Projekt-Meta: Angaben hintereinander in einer Zeile.
   Jede Einheit (Kategorie + Wert) ist ein Block und bricht nur als Ganzes um. */
.profile-table {
	display: block;
}
.profile-table tbody {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.1rem 1.25rem;
	margin-top: 0.25rem;
}
.profile-table tr {
	display: flex;
	flex: 0 1 auto;
	align-items: flex-start;
	gap: 0.4rem;
	max-width: 100%;
	padding: 0;
}
.profile-table th,
.profile-table td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
}
.profile-table th {
	flex: none;
	font-size: 0.6rem;
	line-height: 1.6;
}
/* Links mit Komma hintereinander statt untereinander */
.profile-links {
	display: inline;
	margin: 0;
	padding: 0;
	list-style: none;
}
.profile-links li {
	display: inline;
}
.profile-links li:not(:last-child)::after {
	content: ", ";
}

/* Sanftes Scrollen auf der ganzen Website (z. B. Sprung zum Kontaktformular),
   außer wenn im System „Bewegung reduzieren“ eingestellt ist */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* TEST: Projekttext am Desktop über beide Spalten (unter Titel und Meta).
   Zum Zurücknehmen einfach diesen Block löschen. */
@media (min-width: 1000px) {
	.project-header {
		grid-row: 1;
	}
	.project-text {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-top: 0.5rem;
		padding-left: 2rem;
	}
}
/* Projekttext ohne Einzug am Absatzanfang */
.project-text p {
	text-indent: 0;
}