/* =========================================================================
   ZL-Videothek 2026 – "Mittelalter / Illuminierte Handschrift"
   -------------------------------------------------------------------------
   Pergament, Eichenholz, Blattgold und Ochsenblut-Rot.
   Alle Effekte sind rein in CSS umgesetzt (Verläufe statt Bilddateien).

   Ladereihenfolge: bootstrap -> login.css -> ZLVideothek.css ->
   ZLVideothekPictures.css -> DIESE DATEI. Diese Datei gewinnt also bei
   gleicher Spezifitaet; !important nur dort, wo die Basis-Dateien selbst
   !important benutzen.
   ========================================================================= */


/* -------------------------------------------------------------------------
   0. Schriften – lokal aus ../res/, keine Verbindung nach aussen
   -------------------------------------------------------------------------
   Alle drei Familien stehen unter der SIL Open Font License 1.1; die
   Lizenztexte liegen als OFL-*.txt daneben in ../res/.

   Es sind Variable Fonts: eine Datei deckt den gesamten Gewichtsbereich ab,
   deshalb steht bei font-weight eine Spanne (z. B. "400 900") statt eines
   einzelnen Werts. Der Browser interpoliert daraus jedes benoetigte
   Gewicht – es braucht also keine separaten Dateien pro Schnitt.

   Pro Familie gibt es zwei Schnitte: "latin" deckt Deutsch samt Umlauten
   und ß ab, "latin-ext" die uebrigen europaeischen Zeichen (z. B. Namen
   mit ł, ő, ř). Ueber unicode-range laedt der Browser latin-ext nur dann,
   wenn auf der Seite wirklich ein solches Zeichen vorkommt.

   font-display: swap sorgt dafuer, dass der Text sofort in der
   Ersatzschrift sichtbar ist und nicht kurz unsichtbar bleibt.
   ------------------------------------------------------------------------- */

/* --- Cinzel: Ueberschriften, Menue, Knoepfe, Namensschilder --- */
@font-face {
	font-family: 'Cinzel';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../res/Cinzel-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Cinzel';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../res/Cinzel-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- EB Garamond: Fliesstext, Formulare, Beschriftungen --- */
@font-face {
	font-family: 'EB Garamond';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../res/EBGaramond-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'EB Garamond';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../res/EBGaramond-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Kursiv: wird u. a. fuer die Platzhalter in Eingabefeldern gebraucht. */
@font-face {
	font-family: 'EB Garamond';
	font-style: italic;
	font-weight: 400 800;
	font-display: swap;
	src: url('../res/EBGaramond-Italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'EB Garamond';
	font-style: italic;
	font-weight: 400 800;
	font-display: swap;
	src: url('../res/EBGaramond-Italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- UnifrakturMaguntia: Schriftzug und Initiale (nur "latin" verfuegbar) --- */
@font-face {
	font-family: 'UnifrakturMaguntia';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../res/UnifrakturMaguntia-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* -------------------------------------------------------------------------
   1. Farb- und Stil-Tokens
   ------------------------------------------------------------------------- */

:root {
	/* Pergament */
	--zl-parchment:        #efe0bd;
	--zl-parchment-mid:    #e5d3a8;
	--zl-parchment-dark:   #d6c091;
	--zl-parchment-light:  #f7ecd2;

	/* Tinte */
	--zl-ink:              #2b1d0e;
	--zl-ink-soft:         #4d3721;
	--zl-ink-faded:        #6b5334;

	/* Eiche / Holz */
	--zl-wood:             #3a2617;
	--zl-wood-dark:        #23150a;
	--zl-wood-light:       #563a24;

	/* Ochsenblut */
	--zl-blood:            #6d1a1a;
	--zl-blood-dark:       #4a0f0f;
	--zl-blood-light:      #8f2727;

	/* Blattgold */
	--zl-gold:             #c9a227;
	--zl-gold-light:       #f2dc8b;
	--zl-gold-pale:        #e6cf7e;
	--zl-gold-dark:        #8a6b12;

	/* Akzente */
	--zl-forest:           #33502f;
	--zl-forest-light:     #4f7248;

	/* Schriften */
	--zl-font-body:        'EB Garamond', 'Garamond', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
	--zl-font-display:     'Cinzel', 'Trajan Pro', 'Palatino Linotype', Georgia, serif;
	--zl-font-black:       'UnifrakturMaguntia', 'Old English Text MT', 'Cinzel', Georgia, serif;

	/* Masse */
	--zl-radius:           2px;   /* Mittelalter kennt keine runden Ecken */
	--zl-border-gold:      2px solid var(--zl-gold-dark);
	--zl-shadow-deep:      0 10px 28px rgba(35, 21, 10, .45);
	--zl-shadow-soft:      0 4px 14px rgba(35, 21, 10, .28);
}


/* -------------------------------------------------------------------------
   2. Pergament-Untergrund
   ------------------------------------------------------------------------- */

body {
	background-color: var(--zl-parchment) !important;
	/* Mehrere sehr weiche Verlaufsebenen ergeben die Fleckigkeit von Pergament. */
	background-image:
		radial-gradient(ellipse 60% 45% at 18% 12%, rgba(150, 112, 60, .16), transparent 62%),
		radial-gradient(ellipse 50% 40% at 82% 26%, rgba(122,  88, 44, .14), transparent 60%),
		radial-gradient(ellipse 70% 50% at 45% 78%, rgba(150, 112, 60, .13), transparent 64%),
		radial-gradient(ellipse 35% 30% at 92% 88%, rgba(109,  26, 26, .08), transparent 60%),
		radial-gradient(ellipse 30% 26% at  6% 62%, rgba(109,  26, 26, .07), transparent 60%),
		linear-gradient(172deg, var(--zl-parchment-light) 0%, var(--zl-parchment) 38%, var(--zl-parchment-mid) 100%);
	background-attachment: fixed;
	background-repeat: no-repeat;

	font-family: var(--zl-font-body);
	font-size: 18px;
	line-height: 1.6;
	color: var(--zl-ink);
	min-height: 100vh;
}

/* Vignette: die Seite wird zum Rand hin dunkler, wie ein altes Blatt.

   WICHTIG: z-index: -1. Die Vignette legt sich damit hinter den gesamten
   Seiteninhalt, aber noch vor den Pergament-Hintergrund.
   Nicht ersetzen durch z-index: 0 plus "body > * { position: relative;
   z-index: 1 }" – das gaebe der <div class="row"> um die Navigationsleiste
   einen eigenen Stapelkontext. Das fixed-top der Leiste (z-index 1030)
   waere darin gefangen, und .centerContent wuerde als spaeteres
   Geschwisterelement darueber liegen: Aufklappmenues verschwinden hinter
   dem Inhalt und die Links der Leiste sind nicht mehr klickbar. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	background:
		radial-gradient(ellipse at center, transparent 52%, rgba(58, 38, 23, .10) 78%, rgba(35, 21, 10, .30) 100%);
}

.container {
	color: var(--zl-ink);
}


/* -------------------------------------------------------------------------
   3. Typografie
   ------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.modal-title {
	font-family: var(--zl-font-display);
	color: var(--zl-blood);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-shadow: 0 1px 0 rgba(247, 236, 210, .8);
}

h5, h6 {
	text-transform: none;
	letter-spacing: .03em;
	color: var(--zl-ink-soft);
}

/* Ueberschriften der Unterseiten bekommen eine Zierleiste mit Rankenzeichen. */
.centerContent h4,
.centerContent h2 {
	font-weight: 700;
	padding-top: 10px;
	padding-bottom: 14px;
	margin-bottom: 22px;
	text-align: center;
	position: relative;
}

.centerContent h4::after,
.centerContent h2::after {
	content: "❦";
	display: block;
	margin: 10px auto 0;
	font-family: var(--zl-font-body);
	font-size: .62em;
	line-height: 1;
	color: var(--zl-gold-dark);
	text-transform: none;
	text-shadow: none;
	/* Zwei goldene Linien links und rechts des Zeichens. */
	background:
		linear-gradient(to right, transparent, var(--zl-gold-dark)) left center / calc(50% - 1.6em) 1px no-repeat,
		linear-gradient(to left,  transparent, var(--zl-gold-dark)) right center / calc(50% - 1.6em) 1px no-repeat;
}

.main-text,
.main-Text {
	color: var(--zl-ink);
	font-family: var(--zl-font-body);
}

p, label, span, td, li {
	font-family: var(--zl-font-body);
}

/* Initiale: der Begruessungstext auf der Startseite bekommt einen
   illuminierten Anfangsbuchstaben. Der Selektor trifft bewusst nur das
   <span class="main-text"> der Startseite – nicht den Footer (steht
   ausserhalb von .centerContent), nicht die Hinweiszeile der
   Benutzerseite (die traegt zusaetzlich .info) und nicht die Labels
   der Kontaktseite (das sind <label>, kein <span>). */
.centerContent span.main-text:not(.info) {
	display: block;
	font-size: 1.06em;
	text-align: justify;
	hyphens: auto;
}

.centerContent span.main-text:not(.info)::first-letter {
	float: left;
	margin: 6px 12px 0 0;
	padding: 6px 12px 10px;
	font-family: var(--zl-font-black);
	font-size: 3.4em;
	line-height: .82;
	color: var(--zl-gold-light);
	background:
		linear-gradient(155deg, var(--zl-blood-light) 0%, var(--zl-blood) 45%, var(--zl-blood-dark) 100%);
	border: 2px solid var(--zl-gold-dark);
	box-shadow:
		inset 0 0 0 1px rgba(242, 220, 139, .45),
		var(--zl-shadow-soft);
	text-shadow: 0 2px 3px rgba(0, 0, 0, .55);
}

a {
	color: var(--zl-blood);
	text-decoration: none;
	border-bottom: 1px dotted rgba(109, 26, 26, .55);
	transition: color .2s ease, border-color .2s ease;
}

a:hover,
a:focus {
	color: var(--zl-gold-dark);
	border-bottom-color: var(--zl-gold-dark);
	text-decoration: none;
}

/* Links, die nur ein Bild oder einen Knopf umschliessen, brauchen keine
   punktierte Grundlinie. */
a[data-fancybox],
a.navbar-brand,
a.btn,
.personPictures a,
.card a {
	border-bottom: 0;
}

/* Zierteiler statt schlichter Linie. */
hr {
	border: 0;
	height: 18px;
	margin: 28px 0;
	background: none;
	position: relative;
	overflow: visible;
}

hr::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(to right,
		transparent 0%,
		var(--zl-gold-dark) 12%,
		var(--zl-gold) 50%,
		var(--zl-gold-dark) 88%,
		transparent 100%);
}

hr::after {
	content: "✦";
	position: absolute;
	top: -2px;
	left: 50%;
	transform: translateX(-50%);
	padding: 0 12px;
	font-size: 15px;
	line-height: 20px;
	color: var(--zl-gold-dark);
	background: var(--zl-parchment);
}

/* Auf der helleren Inhaltsflaeche muss das Zierzeichen denselben Ton haben. */
.centerContent hr::after,
.modal-content hr::after {
	background: #f6ead0;
}

::selection {
	background: var(--zl-blood);
	color: var(--zl-gold-light);
}


/* -------------------------------------------------------------------------
   4. Navigation – ein Balken aus dunkler Eiche mit Goldbeschlag
   ------------------------------------------------------------------------- */

.navbar {
	background-color: var(--zl-wood) !important;
	background-image:
		/* Holzmaserung */
		repeating-linear-gradient(90deg,
			rgba(255, 255, 255, .028) 0px,
			rgba(255, 255, 255, .028) 1px,
			transparent 1px,
			transparent 4px,
			rgba(0, 0, 0, .05) 4px,
			rgba(0, 0, 0, .05) 6px,
			transparent 6px,
			transparent 11px),
		linear-gradient(180deg, var(--zl-wood-light) 0%, var(--zl-wood) 55%, var(--zl-wood-dark) 100%);
	border-bottom: 3px solid var(--zl-gold-dark) !important;
	border-bottom-style: solid !important;
	box-shadow:
		inset 0 -1px 0 rgba(242, 220, 139, .35),
		0 4px 16px rgba(35, 21, 10, .5);
	padding-top: .45rem;
	padding-bottom: .45rem;
	/* Bootstrap setzt das fuer .fixed-top bereits; hier noch einmal
	   ausdruecklich, damit Leiste und Aufklappmenues verlaesslich ueber
	   dem Seiteninhalt liegen. */
	z-index: 1030;
}

/* Bootstrap faerbt .bg-light hell – hier wird daraus das Holz. */
.bg-light {
	background-color: var(--zl-wood) !important;
}

/* Schriftzug "ZL-Videothek" in gebrochener Schrift. */
.navbar-brand.navHeader,
.navHeader {
	font-family: var(--zl-font-black);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.1;
	letter-spacing: .02em;
	color: var(--zl-gold-light) !important;
	border-bottom: 0;
	text-shadow:
		0 1px 0 rgba(0, 0, 0, .6),
		0 0 14px rgba(201, 162, 39, .35);
	transition: color .25s ease, text-shadow .25s ease;
}

.navbar-brand.navHeader:hover,
.navHeader:hover,
.navHeader:focus {
	color: #fff3cf !important;
	text-shadow:
		0 1px 0 rgba(0, 0, 0, .6),
		0 0 20px rgba(242, 220, 139, .75);
}

/* Menuepunkte */
.nav-item a,
.navbar-light .navbar-nav .nav-link {
	font-family: var(--zl-font-display);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--zl-parchment-mid) !important;
	border-bottom: 0;
	padding-left: .85rem;
	padding-right: .85rem;
	position: relative;
	transition: color .2s ease;
}

.nav-item a:hover,
.nav-item a:focus,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link {
	color: var(--zl-gold-light) !important;
}

/* Goldene Unterstreichung, die beim Hovern aufzieht.
   Die Aufklapp-Links sind ausgenommen: bei ihnen belegt Bootstrap ::after
   bereits mit dem Dreieck-Pfeil. */
.nav-item > a:not(.dropdown-toggle)::after {
	content: "";
	position: absolute;
	left: .85rem;
	right: .85rem;
	bottom: .25rem;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--zl-gold), transparent);
	transform: scaleX(0);
	transition: transform .25s ease;
}

.nav-item > a:not(.dropdown-toggle):hover::after,
.nav-item > a:not(.dropdown-toggle):focus::after {
	transform: scaleX(1);
}

/* Der Pfeil der Aufklapp-Menues erbt die Goldtoene ueber currentColor. */
.nav-item > a.dropdown-toggle::after {
	vertical-align: .2em;
	margin-left: .45em;
}

/* Personen-Icon im Kopf */
.navbar-nav .bi-person {
	color: var(--zl-gold-pale) !important;
	font-size: 22px;
	border-bottom: 0;
}

.navbar-nav .bi-person:hover {
	color: var(--zl-gold-light) !important;
}

/* Burger-Menue: Bootstrap liefert ein dunkles Icon, auf Holz braucht es Gold. */
.navbar-toggler {
	border: 2px solid var(--zl-gold-dark);
	border-radius: var(--zl-radius);
	padding: .3rem .55rem;
	background: rgba(0, 0, 0, .2);
}

.navbar-light .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%23e6cf7e' stroke-width='2.2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* -------------------------------------------------------------------------
   5. Aufklapp-Menues – kleine Pergamentrollen
   ------------------------------------------------------------------------- */

.dropdown-menu {
	background-color: var(--zl-parchment-light) !important;
	background-image: linear-gradient(180deg, var(--zl-parchment-light), var(--zl-parchment-mid));
	border: var(--zl-border-gold);
	border-radius: var(--zl-radius);
	padding: 6px;
	margin-top: .5rem;
	box-shadow:
		inset 0 0 0 1px rgba(242, 220, 139, .55),
		var(--zl-shadow-deep);
}

.dropdown-menu a,
.dropdown-item {
	color: var(--zl-ink) !important;
	font-family: var(--zl-font-display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .06em;
	padding: .42rem 1rem;
	border-bottom: 0;
	border-radius: var(--zl-radius);
	transition: background-color .18s ease, color .18s ease;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-menu a:hover,
.dropdown-menu a:focus {
	background: linear-gradient(180deg, var(--zl-blood-light), var(--zl-blood));
	color: var(--zl-gold-light) !important;
}

.dropdown-item.active,
.dropdown-item:active {
	background: linear-gradient(180deg, var(--zl-gold-pale), var(--zl-gold));
	color: var(--zl-wood-dark) !important;
	box-shadow: inset 0 0 0 1px var(--zl-gold-dark);
}

.dropdown-divider {
	border-top: 1px solid var(--zl-gold-dark);
	opacity: .6;
	margin: 6px 4px;
}


/* -------------------------------------------------------------------------
   6. Inhaltsflaeche – das beschriebene Blatt
   ------------------------------------------------------------------------- */

.centerContent {
	/* Der Fixed-Navbar Platz machen, aber das Blatt darunter beginnen lassen. */
	margin-top: 78px;
	padding: 26px 30px 34px;

	background-image:
		radial-gradient(ellipse 60% 40% at 25% 10%, rgba(150, 112, 60, .10), transparent 62%),
		radial-gradient(ellipse 55% 45% at 78% 84%, rgba(150, 112, 60, .09), transparent 62%),
		linear-gradient(178deg, rgba(247, 236, 210, .85), rgba(230, 212, 172, .80));

	border: 1px solid var(--zl-gold-dark);
	border-radius: var(--zl-radius);
	box-shadow:
		inset 0 0 0 6px rgba(247, 236, 210, .55),
		inset 0 0 0 7px rgba(138, 107, 18, .45),
		inset 0 0 60px rgba(122, 88, 44, .10),
		var(--zl-shadow-soft);
	position: relative;
}

/* Ecken-Ranken oben links und unten rechts. */
.centerContent::before,
.centerContent::after {
	content: "❧";
	position: absolute;
	font-size: 20px;
	line-height: 1;
	color: var(--zl-gold-dark);
	opacity: .75;
	pointer-events: none;
}

.centerContent::before {
	top: 8px;
	left: 12px;
}

.centerContent::after {
	bottom: 8px;
	right: 12px;
	transform: rotate(180deg);
}

/* Der Kontaktbereich nutzt .container UND .centerContent am selben Element. */
.container.centerContent {
	max-width: 1140px;
}

.leitiPictureRow,
.personPictureRow,
.teiliPictureRow {
	padding-top: 26px;
}


/* -------------------------------------------------------------------------
   7. Bilder – in Gold gefasst
   ------------------------------------------------------------------------- */

/* Titelbild der Startseite: schwerer Rahmen mit Goldkante. */
.movieTitleImage {
	border: 6px solid var(--zl-wood);
	border-radius: var(--zl-radius);
	box-shadow:
		0 0 0 2px var(--zl-gold-dark),
		0 0 0 3px rgba(247, 236, 210, .5),
		var(--zl-shadow-deep);
	margin-bottom: 26px;
}

/* Galerie-Miniaturen */
.thumb {
	padding: 0;
	margin: 5px;
	border: 3px solid var(--zl-wood);
	border-radius: var(--zl-radius);
	box-shadow:
		0 0 0 1px var(--zl-gold-dark),
		var(--zl-shadow-soft);
	/* Statt des neutralen Graus der Basis-Datei eine warme Sepia-Toenung –
	   wie eine alte Abbildung. Beim Hovern kommt die volle Farbe zurueck. */
	filter: sepia(72%) saturate(68%) contrast(94%) brightness(1.02);
	transition: filter .3s ease, transform .3s ease, box-shadow .3s ease;
}

.thumb:hover {
	filter: sepia(0%) saturate(100%) contrast(100%) brightness(1);
	transform: translateY(-3px) scale(1.02);
	box-shadow:
		0 0 0 2px var(--zl-gold),
		0 10px 24px rgba(35, 21, 10, .45);
}

/* Tagesberichte */
.thumbTB {
	padding: 0;
	margin: 6px;
	max-width: 250px;
	border: 3px solid var(--zl-wood);
	border-radius: var(--zl-radius);
	box-shadow:
		0 0 0 1px var(--zl-gold-dark),
		var(--zl-shadow-soft);
	filter: sepia(72%) saturate(68%) contrast(94%) brightness(1.02);
	transition: filter .3s ease, transform .3s ease, box-shadow .3s ease;
}

.thumbTB:hover {
	filter: sepia(0%) saturate(100%) contrast(100%) brightness(1);
	transform: translateY(-3px);
	box-shadow:
		0 0 0 2px var(--zl-gold),
		0 10px 24px rgba(35, 21, 10, .45);
}

/* Portraits von Leitis und Teilis: Medaillon-Optik. */
.personPictures {
	position: relative;
	text-align: center;
	margin-bottom: 26px;
}

.personPictureWidth,
.teiliPictureWidth {
	border: 4px solid var(--zl-wood);
	border-radius: var(--zl-radius);
	box-shadow:
		0 0 0 2px var(--zl-gold-dark),
		var(--zl-shadow-soft);
	background: var(--zl-parchment-light);
	transition: transform .3s ease, box-shadow .3s ease;
}

.personPictures:hover .personPictureWidth,
.personPictures:hover .teiliPictureWidth {
	transform: translateY(-4px);
	box-shadow:
		0 0 0 2px var(--zl-gold),
		0 12px 26px rgba(35, 21, 10, .42);
}

/* Namensschild unter dem Portrait – ein kleines Messingschild. */
.personNames,
.personnames {
	display: block;
	margin-top: 10px;
	padding: 5px 14px;
	font-family: var(--zl-font-display);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: center;
	color: var(--zl-wood-dark);
	background: linear-gradient(180deg, var(--zl-gold-light), var(--zl-gold-pale) 48%, var(--zl-gold) 100%);
	border: 1px solid var(--zl-gold-dark);
	border-radius: var(--zl-radius);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .6),
		0 2px 5px rgba(35, 21, 10, .3);
	text-shadow: 0 1px 0 rgba(255, 248, 220, .6);
}

/* Besonders hervorgehobene Person (Userverwaltung). */
.personname.special,
.personNames.special {
	background: linear-gradient(180deg, var(--zl-blood-light), var(--zl-blood));
	color: var(--zl-gold-light);
	border-color: var(--zl-gold-dark);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}


/* -------------------------------------------------------------------------
   8. Film – die Bilderrolle im Holzrahmen
   ------------------------------------------------------------------------- */

#movie-player,
.video-js,
video {
	border: 6px solid var(--zl-wood);
	border-radius: var(--zl-radius);
	background-color: var(--zl-wood-dark);
	box-shadow:
		0 0 0 2px var(--zl-gold-dark),
		var(--zl-shadow-deep);
}


/* -------------------------------------------------------------------------
   9. Download-Links – als gesiegelte Urkunde
   ------------------------------------------------------------------------- */

.downloadLink,
.downloadlink {
	display: inline-block;
	margin-top: 22px;
	padding: 11px 26px 11px 44px;
	position: relative;

	font-family: var(--zl-font-display);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--zl-parchment-light) !important;

	background: linear-gradient(180deg, var(--zl-blood-light), var(--zl-blood) 55%, var(--zl-blood-dark));
	border: 2px solid var(--zl-gold-dark);
	border-radius: var(--zl-radius);
	border-bottom-width: 2px;
	box-shadow:
		inset 0 1px 0 rgba(242, 220, 139, .35),
		var(--zl-shadow-soft);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* Kleines Wachssiegel links im Knopf. */
.downloadLink::before,
.downloadlink::before {
	content: "❖";
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--zl-font-body);
	font-size: 15px;
	color: var(--zl-gold-pale);
	text-shadow: none;
}

.downloadLink:hover,
.downloadlink:hover,
.downloadLink:focus,
.downloadlink:focus {
	color: #fff6da !important;
	filter: brightness(1.12);
	transform: translateY(-2px);
	box-shadow:
		inset 0 1px 0 rgba(242, 220, 139, .45),
		0 8px 20px rgba(35, 21, 10, .42);
}

.downloadLink:active,
.downloadlink:active {
	transform: translateY(0);
}


/* -------------------------------------------------------------------------
   10. Formulare und Knoepfe – Messingbeschlag auf Pergament
   ------------------------------------------------------------------------- */

input[type=text],
input[type=email],
input[type=password],
textarea,
select,
.form-control,
.form-select {
	font-family: var(--zl-font-body) !important;
	font-size: 17px;
	color: var(--zl-ink) !important;
	background-color: var(--zl-parchment-light) !important;
	border: 2px solid var(--zl-gold-dark) !important;
	border-radius: var(--zl-radius) !important;
	box-shadow: inset 0 2px 5px rgba(122, 88, 44, .18);
	transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
	background-color: #fdf6e4 !important;
	border-color: var(--zl-blood) !important;
	box-shadow:
		inset 0 2px 5px rgba(122, 88, 44, .12),
		0 0 0 3px rgba(201, 162, 39, .3);
	outline: none;
}

::placeholder {
	color: var(--zl-ink-faded);
	opacity: .75;
	font-style: italic;
}

/* Die Basis-Datei gibt .userInformation-Feldern 50 % Breite – das bleibt,
   nur die Optik wird angepasst. */
input[type=email].userInformation,
input[type=password].userInformation,
input[type=text].userInformation,
input[type=email].userinformation,
input[type=password].userinformation,
input[type=text].userinformation {
	border: 2px solid var(--zl-gold-dark);
	border-radius: var(--zl-radius);
	padding: 8px 12px;
	text-align: left;
}

.userEditLabel,
.usereditlabel {
	font-family: var(--zl-font-display);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .05em;
	color: var(--zl-ink-soft);
	display: flex;
	align-items: center;
}

/* Alle Knoepfe: gehaemmertes Messing. */
input[type=button],
input[type=submit],
input[type=reset],
.btn,
.userInformationButton,
.userinformationbutton {
	font-family: var(--zl-font-display) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	letter-spacing: .1em;
	text-transform: uppercase;

	color: var(--zl-wood-dark) !important;
	background: linear-gradient(180deg, var(--zl-gold-light) 0%, var(--zl-gold-pale) 45%, var(--zl-gold) 100%) !important;
	background-color: var(--zl-gold) !important;

	border: 2px solid var(--zl-gold-dark) !important;
	border-radius: var(--zl-radius) !important;
	padding: 11px 30px !important;
	margin: 5px 8px 18px 0 !important;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .65),
		inset 0 -2px 4px rgba(138, 107, 18, .35),
		0 3px 8px rgba(35, 21, 10, .3) !important;
	text-shadow: 0 1px 0 rgba(255, 248, 220, .55);
	transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover,
.btn:hover,
.userInformationButton:hover,
.userinformationbutton:hover {
	filter: brightness(1.08);
	transform: translateY(-2px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .75),
		inset 0 -2px 4px rgba(138, 107, 18, .35),
		0 7px 16px rgba(35, 21, 10, .38) !important;
}

input[type=button]:active,
input[type=submit]:active,
input[type=reset]:active,
.btn:active,
.userInformationButton:active,
.userinformationbutton:active {
	transform: translateY(1px);
	box-shadow:
		inset 0 2px 6px rgba(138, 107, 18, .5) !important;
}

/* Hauptaktion (z. B. "Senden" im Kontaktformular): Ochsenblut statt Messing. */
.btn-primary,
.btn-info {
	color: var(--zl-gold-light) !important;
	background: linear-gradient(180deg, var(--zl-blood-light), var(--zl-blood) 55%, var(--zl-blood-dark)) !important;
	background-color: var(--zl-blood) !important;
	border-color: var(--zl-gold-dark) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.btn-primary:hover,
.btn-info:hover {
	color: #fff6da !important;
}


/* -------------------------------------------------------------------------
   11. Anmeldung – die versiegelte Urkunde
   ------------------------------------------------------------------------- */

/* Die Anmeldekarte muss unterhalb der fixierten Navigationsleiste beginnen,
   sonst ueberdeckt sie deren Flaeche (u. a. den Link zur ZL-Homepage). */
.wrapper {
	padding-top: 96px;
}

#formContent {
	background: linear-gradient(178deg, var(--zl-parchment-light), var(--zl-parchment-mid)) !important;
	background-color: var(--zl-parchment-light) !important;
	border: 3px solid var(--zl-gold-dark);
	border-radius: var(--zl-radius);
	box-shadow:
		inset 0 0 0 1px rgba(242, 220, 139, .6),
		inset 0 0 50px rgba(122, 88, 44, .12),
		0 24px 50px rgba(35, 21, 10, .45);
	padding-top: 18px;
	overflow: hidden;
}

#formContent::before {
	content: "ZL-Videothek";
	display: block;
	font-family: var(--zl-font-black);
	font-size: 30px;
	line-height: 1.2;
	color: var(--zl-blood);
	padding: 14px 10px 0;
}

#formFooter {
	background-color: rgba(214, 192, 145, .5);
	border-top: 2px solid var(--zl-gold-dark);
	border-radius: 0;
}

#icon {
	width: 22%;
	max-width: 110px;
	margin-top: 10px;
	filter: drop-shadow(0 3px 6px rgba(35, 21, 10, .4));
}

.underlineHover {
	font-family: var(--zl-font-display);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: 13px;
	color: var(--zl-ink-soft);
	border-bottom: 0;
}

.underlineHover:after {
	background-color: var(--zl-gold-dark);
}

.underlineHover:hover {
	color: var(--zl-blood);
}

/* Die Login-Felder sind in login.css zentriert – das passt, nur Farbe fehlt. */
#formContent input[type=email],
#formContent input[type=password] {
	text-align: center;
}


/* -------------------------------------------------------------------------
   12. Karten und Jahresauswahl – Wappenschilde
   ------------------------------------------------------------------------- */

.card {
	border: 2px solid var(--zl-gold-dark);
	border-radius: var(--zl-radius);
	background-color: var(--zl-parchment-light);
	box-shadow: var(--zl-shadow-soft);
}

/* Die Jahreskarten in der Benutzerverwaltung. */
.card.bg-primary,
.bg-primary {
	background: linear-gradient(165deg, var(--zl-wood-light), var(--zl-wood) 55%, var(--zl-wood-dark)) !important;
	background-color: var(--zl-wood) !important;
	border: 2px solid var(--zl-gold-dark) !important;
	box-shadow:
		inset 0 0 0 1px rgba(242, 220, 139, .3),
		var(--zl-shadow-soft);
}

.card.bg-primary .card-text,
.bg-primary .card-text {
	font-family: var(--zl-font-display);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: .1em;
	color: var(--zl-gold-light);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
	margin-bottom: 0;
}

.card-text {
	font-size: 15px;
}

.card-deck {
	margin-top: 14px;
	margin-bottom: 14px;
}

.bg-white {
	background: linear-gradient(178deg, var(--zl-parchment-light), var(--zl-parchment-mid)) !important;
}

/* Modal "Weitere Zeltlagerjahre beantragen" */
.modal-content {
	background: linear-gradient(178deg, var(--zl-parchment-light), var(--zl-parchment-mid));
	border: 3px solid var(--zl-gold-dark);
	border-radius: var(--zl-radius);
	box-shadow:
		inset 0 0 0 1px rgba(242, 220, 139, .55),
		0 24px 50px rgba(35, 21, 10, .5);
}

.modal-header,
.modal-footer {
	border-color: var(--zl-gold-dark);
}

.modal-title {
	font-size: 22px;
	margin-bottom: 18px;
}

.close {
	color: var(--zl-blood);
	opacity: .8;
	text-shadow: none;
}

.close:hover {
	color: var(--zl-blood-dark);
	opacity: 1;
}

/* Auswahlkacheln der Jahre */
.card-block {
	width: 150px;
	height: 150px;
	border: 2px solid var(--zl-gold-dark);
	border-radius: var(--zl-radius) !important;
	background: linear-gradient(178deg, var(--zl-parchment-light), var(--zl-parchment-mid));
	margin-bottom: 30px;
	transition: transform .2s ease, box-shadow .2s ease;
}

.check {
	color: var(--zl-ink);
	font-family: var(--zl-font-display);
	font-weight: 700;
	letter-spacing: .06em;
	border-radius: var(--zl-radius);
	/* Die Basis-Datei entsaettigt nicht gewaehlte Kacheln auf reines Grau;
	   hier bleiben sie stattdessen im warmen Pergamentton. */
	-webkit-filter: sepia(55%) saturate(70%) brightness(.98);
	   -moz-filter: sepia(55%) saturate(70%) brightness(.98);
	        filter: sepia(55%) saturate(70%) brightness(.98);
}

.check.selected {
	-webkit-filter: none;
	   -moz-filter: none;
	        filter: none;
}

.check:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 18px rgba(35, 21, 10, .32);
}

.check.selected,
.selected {
	background: linear-gradient(178deg, var(--zl-gold-light), var(--zl-gold-pale)) !important;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, .5),
		0 6px 14px rgba(35, 21, 10, .28);
}

.check.assigned {
	border: 2px solid var(--zl-blood);
	background: linear-gradient(178deg, var(--zl-parchment-mid), var(--zl-parchment-dark)) !important;
}

.check.selected.assigned {
	background: linear-gradient(178deg, var(--zl-gold-pale), var(--zl-gold)) !important;
	border-color: var(--zl-blood);
}


/* -------------------------------------------------------------------------
   13. Hinweise – Banner am Mast
   ------------------------------------------------------------------------- */

.alert {
	font-family: var(--zl-font-body);
	font-size: 17px;
	border: 2px solid var(--zl-gold-dark);
	border-left-width: 7px;
	border-radius: var(--zl-radius);
	box-shadow: var(--zl-shadow-soft);
}

.alert-success {
	background: linear-gradient(178deg, #e2ecd4, #cfdfbe);
	border-left-color: var(--zl-forest);
	color: #22391f;
}

.alert-danger {
	background: linear-gradient(178deg, #f0d9d3, #e2c0b8);
	border-left-color: var(--zl-blood);
	color: var(--zl-blood-dark);
}


/* -------------------------------------------------------------------------
   14. Leiti-Jahre – das Jahr im Kerzenschein
   ------------------------------------------------------------------------- */

.leitiYear,
.leitiyear {
	color: var(--zl-blood) !important;
	font-weight: 700;
}

.leitiYear::before,
.leitiyear::before {
	content: "⚜ ";
	color: var(--zl-gold-dark);
}

.leitiYearHead,
.leitiyearhead {
	color: var(--zl-gold-light);
	font-weight: 700;
	/* Statt des Neon-Glimmens aus 2025 ein warmes Kerzenflackern. */
	-webkit-animation: zlCandle 2.4s ease-in-out infinite alternate;
	animation: zlCandle 2.4s ease-in-out infinite alternate;
}

@-webkit-keyframes zlCandle {
	from {
		text-shadow:
			0 0 5px rgba(255, 236, 180, .9),
			0 0 12px rgba(201, 162, 39, .75),
			0 0 22px rgba(176, 96, 20, .5);
	}
	to {
		text-shadow:
			0 0 9px rgba(255, 246, 214, 1),
			0 0 20px rgba(228, 176, 52, .9),
			0 0 38px rgba(196, 104, 22, .7);
	}
}

@keyframes zlCandle {
	from {
		text-shadow:
			0 0 5px rgba(255, 236, 180, .9),
			0 0 12px rgba(201, 162, 39, .75),
			0 0 22px rgba(176, 96, 20, .5);
	}
	to {
		text-shadow:
			0 0 9px rgba(255, 246, 214, 1),
			0 0 20px rgba(228, 176, 52, .9),
			0 0 38px rgba(196, 104, 22, .7);
	}
}

/* Das alte Glimmen aus der Basis-Datei ueberschreiben, damit auf der
   2026-Seite kein pinkes Neon mehr auftaucht. */
@-webkit-keyframes glow {
	from {
		text-shadow:
			0 0 5px rgba(255, 236, 180, .9),
			0 0 12px rgba(201, 162, 39, .75),
			0 0 22px rgba(176, 96, 20, .5);
	}
	to {
		text-shadow:
			0 0 9px rgba(255, 246, 214, 1),
			0 0 20px rgba(228, 176, 52, .9),
			0 0 38px rgba(196, 104, 22, .7);
	}
}

@keyframes glow {
	from {
		text-shadow:
			0 0 5px rgba(255, 236, 180, .9),
			0 0 12px rgba(201, 162, 39, .75),
			0 0 22px rgba(176, 96, 20, .5);
	}
	to {
		text-shadow:
			0 0 9px rgba(255, 246, 214, 1),
			0 0 20px rgba(228, 176, 52, .9),
			0 0 38px rgba(196, 104, 22, .7);
	}
}


/* -------------------------------------------------------------------------
   15. Fusszeile
   ------------------------------------------------------------------------- */

body > div:last-of-type table {
	font-size: 14px;
}

body > div:last-of-type .main-text {
	color: var(--zl-ink-faded);
	font-variant: small-caps;
	letter-spacing: .06em;
}


/* -------------------------------------------------------------------------
   16. Bildlaufleiste in Messing
   ------------------------------------------------------------------------- */

html {
	scrollbar-color: var(--zl-gold-dark) var(--zl-parchment-dark);
	scrollbar-width: thin;
}

::-webkit-scrollbar {
	width: 13px;
	height: 13px;
}

::-webkit-scrollbar-track {
	background: var(--zl-parchment-dark);
	border-left: 1px solid var(--zl-gold-dark);
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--zl-gold-pale), var(--zl-gold) 50%, var(--zl-gold-dark));
	border: 1px solid var(--zl-wood);
	border-radius: var(--zl-radius);
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, var(--zl-gold-light), var(--zl-gold-pale) 50%, var(--zl-gold));
}


/* -------------------------------------------------------------------------
   17. Kleinere Bildschirme
   ------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
	.navbar-brand.navHeader,
	.navHeader {
		font-size: 27px;
	}

	/* Aufgeklapptes Menue auf Holz: Trennlinien statt Hover-Striche. */
	.navbar-collapse .navbar-nav .nav-item {
		border-top: 1px solid rgba(201, 162, 39, .28);
	}

	.dropdown-menu {
		border-width: 1px;
	}
}

@media (max-width: 767.98px) {
	body {
		font-size: 17px;
	}

	.centerContent {
		margin-top: 68px;
		padding: 18px 14px 24px;
		box-shadow:
			inset 0 0 0 4px rgba(247, 236, 210, .5),
			inset 0 0 0 5px rgba(138, 107, 18, .4),
			var(--zl-shadow-soft);
	}

	.centerContent::before,
	.centerContent::after {
		display: none;
	}

	.centerContent span.main-text::first-letter {
		font-size: 2.8em;
	}

	input[type=email].userInformation,
	input[type=password].userInformation,
	input[type=text].userInformation,
	input[type=email].userinformation,
	input[type=password].userinformation,
	input[type=text].userinformation {
		width: 100%;
	}

	.downloadLink,
	.downloadlink {
		display: block;
		text-align: center;
	}
}


/* -------------------------------------------------------------------------
   18. Ruecksicht auf Nutzer, die Bewegung reduzieren wollen
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.leitiYearHead,
	.leitiyearhead {
		-webkit-animation: none;
		animation: none;
		text-shadow: 0 0 10px rgba(201, 162, 39, .8);
	}

	.thumb,
	.thumbTB,
	.check,
	.card-block,
	.downloadLink,
	.downloadlink,
	input[type=button],
	input[type=submit],
	.btn,
	.personPictureWidth,
	.nav-item > a::after {
		transition: none;
	}

	.thumb:hover,
	.thumbTB:hover,
	.check:hover,
	.downloadLink:hover,
	.downloadlink:hover,
	.btn:hover,
	input[type=submit]:hover {
		transform: none;
	}
}