/* Lions Club Diez – Mitgliederbereich
   Baut auf den Farben und Formen des Themes auf. */

/* --- Anmeldeformular --- */
.lcdm-login {
	max-width: 460px;
	margin: 2.5rem auto;
	background: var(--lions-white, #fff);
	border: 1px solid var(--lions-line, #e3e7ef);
	border-top: 4px solid var(--lions-gold, #ebb700);
	border-radius: 10px;
	padding: 2rem 2rem 2.2rem;
	box-shadow: 0 2px 14px rgba(0, 35, 102, .10);
}

.lcdm-login h2 {
	margin: 0 0 .6rem;
	font-size: 1.3rem;
}

.lcdm-login > p {
	color: var(--lions-grey, #5b5b66);
	font-size: .95rem;
	line-height: 1.6;
	margin: 0 0 1.4rem;
}

.lcdm-login .lcdm-fehler {
	background: #fdecec;
	border-left: 4px solid #c0392b;
	color: #922b21;
	padding: .7rem .9rem;
	border-radius: 4px;
	font-size: .92rem;
	margin: 0 0 1.2rem;
}

.lcdm-login label {
	display: block;
	font-weight: 600;
	margin-bottom: .35rem;
}

.lcdm-login input[type="text"],
.lcdm-login input[type="password"] {
	width: 100%;
	padding: .7rem .85rem;
	border: 1px solid var(--lions-line, #d8dee9);
	border-radius: 6px;
	font-size: 1rem;
	margin-bottom: 1rem;
}

.lcdm-login input[type="text"]:focus,
.lcdm-login input[type="password"]:focus {
	outline: 2px solid var(--lions-gold, #ebb700);
	outline-offset: 1px;
	border-color: var(--lions-gold, #ebb700);
}

.lcdm-login .login-remember label {
	font-weight: 400;
	font-size: .92rem;
	color: var(--lions-grey, #5b5b66);
}

.lcdm-login .login-submit input[type="submit"] {
	width: 100%;
	background: var(--lions-blue, #00338d);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: .8rem 1.2rem;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	margin-top: .4rem;
}

.lcdm-login .login-submit input[type="submit"]:hover {
	background: var(--lions-gold, #ebb700);
	color: #1a1a1a;
}

/* --- Mitgliedermenü --- */
.lcdm-menue {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.4rem;
	background: var(--lions-bg-soft, #f2f5fa);
	border-left: 5px solid var(--lions-gold, #ebb700);
	border-radius: 8px;
	padding: .9rem 1.2rem;
	margin: 0 0 2.2rem;
}

.lcdm-menue-titel {
	font-weight: 800;
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lions-gold-dark, #b58c00);
}

.lcdm-menue ul.lcdm-liste {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
}

.lcdm-menue ul.lcdm-liste li {
	margin: 0;
}

.lcdm-menue ul.lcdm-liste a {
	font-weight: 700;
	color: var(--lions-blue, #00338d);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
}

.lcdm-menue ul.lcdm-liste a:hover,
.lcdm-menue ul.lcdm-liste a.ist-aktiv,
.lcdm-menue ul.lcdm-liste .current-menu-item > a {
	color: var(--lions-gold-dark, #b58c00);
	border-bottom-color: var(--lions-gold, #ebb700);
}

.lcdm-abmelden {
	font-size: .85rem;
	font-weight: 600;
	color: var(--lions-grey, #5b5b66);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.lcdm-abmelden:hover {
	color: var(--lions-blue, #00338d);
}

@media (max-width: 600px) {
	.lcdm-menue {
		flex-direction: column;
		align-items: flex-start;
	}
	.lcdm-login {
		padding: 1.5rem 1.2rem 1.7rem;
	}
}

/* ============================================================
   Inhalte: Programme, Dokumente, Filme, Bildergalerie
   ============================================================ */

.lcdm-hinweis {
	background: #fff8e1;
	border-left: 4px solid var(--lions-gold, #ebb700);
	padding: .9rem 1.1rem;
	border-radius: 6px;
}

/* --- Datei-Listen (Programme, Dokumente) --- */
.lcdm-dateien h3 {
	margin: 2rem 0 .8rem;
	font-size: 1.15rem;
}

.lcdm-dateien h3:first-child { margin-top: 0; }

ul.lcdm-dateiliste {
	list-style: none;
	margin: 0 0 1.4rem;
	padding: 0;
	border-top: 1px solid var(--lions-line, #e3e7ef);
}

ul.lcdm-dateiliste li { margin: 0; }

ul.lcdm-dateiliste a {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .85rem .6rem;
	border-bottom: 1px solid var(--lions-line, #e3e7ef);
	text-decoration: none;
	color: inherit;
}

ul.lcdm-dateiliste a:hover { background: var(--lions-bg-soft, #f2f5fa); }

.lcdm-pdf {
	flex: 0 0 auto;
	background: var(--lions-blue, #00338d);
	color: #fff;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .06em;
	padding: .35em .6em;
	border-radius: 4px;
}

.lcdm-dateititel {
	flex: 1;
	font-weight: 600;
	color: var(--lions-blue, #00338d);
	line-height: 1.4;
}

ul.lcdm-dateiliste a:hover .lcdm-dateititel { color: var(--lions-gold-dark, #b58c00); }

.lcdm-dateizusatz {
	flex: 0 0 auto;
	font-size: .82rem;
	color: var(--lions-grey, #6b7280);
	white-space: nowrap;
}

/* --- Filme --- */
.lcdm-filme h3 { margin: 2.2rem 0 1rem; font-size: 1.15rem; }
.lcdm-filme h3:first-child { margin-top: 0; }

/* Gleiches Raster wie bei den Alben: feste 3 Spalten. */
.lcdm-filmraster {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.6rem;
	margin-bottom: 2rem;
}

@media (max-width: 900px) { .lcdm-filmraster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lcdm-filmraster { grid-template-columns: 1fr; } }

.lcdm-film {
	margin: 0;
	background: #fff;
	border: 1px solid var(--lions-line, #e3e7ef);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 14px rgba(0, 35, 102, .10);
	display: flex;
	flex-direction: column;
	transition: transform .18s ease, box-shadow .18s ease;
}

.lcdm-film:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 35, 102, .16);
}

/* Einheitlicher Rahmen 16:9. `contain` statt `cover`: Die Filme haben
   unterschiedliche Seitenverhältnisse – beschneiden würde Bildinhalt
   abschneiden. Der dunkle Grund lässt die Ränder gewollt wirken. */
.lcdm-film video {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	display: block;
	object-fit: contain;
	background: #0d2240;
	border-radius: 0;
}

.lcdm-film figcaption {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: .9rem 1.1rem 1.1rem;
	font-size: .9rem;
	color: var(--lions-grey, #5b5b66);
	margin-top: auto;
	min-height: 3.1em;
}

.lcdm-film figcaption strong {
	color: var(--lions-blue, #00338d);
	font-size: 1rem;
	line-height: 1.35;
}

.lcdm-film figcaption span {
	flex: 0 0 auto;
	font-size: .82rem;
	white-space: nowrap;
}

/* --- Bildergalerie --- */
.lcdm-galerie-zahl {
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--lions-gold-dark, #b58c00);
	margin: 0 0 1.2rem;
}

.lcdm-albenraster {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.6rem;
}

@media (max-width: 900px) { .lcdm-albenraster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lcdm-albenraster { grid-template-columns: 1fr; } }

.lcdm-album {
	background: #fff;
	border: 1px solid var(--lions-line, #e3e7ef);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 14px rgba(0, 35, 102, .10);
	transition: transform .18s ease, box-shadow .18s ease;
}

.lcdm-album:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 35, 102, .16);
}

.lcdm-album-bild {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: #eef2f8;
	line-height: 0;
	cursor: zoom-in;
	overflow: hidden;
}

.lcdm-album-bild img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.lcdm-album-bild::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg,
		rgba(0, 51, 141, 0) 45%,
		rgba(0, 51, 141, .30) 75%,
		rgba(0, 51, 141, .70) 100%);
}

.lcdm-album:hover .lcdm-album-bild img { transform: scale(1.04); }

.lcdm-album-anzahl {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	background: var(--lions-gold, #ebb700);
	color: #1a1a1a;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1;
	padding: .45em .8em;
	border-radius: 999px;
}

.lcdm-album-text { padding: 1rem 1.1rem 1.2rem; }

.lcdm-album-text h3 {
	margin: 0 0 .3rem;
	font-size: 1.02rem;
	line-height: 1.35;
	color: var(--lions-blue, #00338d);
}

.lcdm-album-text p {
	margin: 0;
	font-size: .85rem;
	font-weight: 600;
	color: var(--lions-grey, #6b7280);
}

/* --- Diaschau --- */
.lcdm-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(8, 26, 51, .95);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
}

.lcdm-lb.is-open { display: flex; }

.lcdm-lb-inner {
	max-width: 1100px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.lcdm-lb-kopf { text-align: center; }

#lcdm-lb h2.lcdm-lb-titel {
	color: #fff;
	font-size: 1.3rem;
	line-height: 1.35;
	margin: 0;
}

#lcdm-lb .lcdm-lb-meta {
	color: var(--lions-gold, #ebb700);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	margin: .4rem 0 0;
}

.lcdm-lb-bild {
	max-width: 100%;
	max-height: 74vh;
	object-fit: contain;
	background: #fff;
	border-radius: 4px;
}

.lcdm-lb button {
	position: absolute;
	background: rgba(255, 255, 255, .92);
	color: var(--lions-blue, #00338d);
	border: 0;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	min-width: 0;
	padding: 0;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.lcdm-lb button:hover { background: var(--lions-gold, #ebb700); }

.lcdm-lb-zu { top: 20px; right: 20px; }
.lcdm-lb-vor { left: 20px; top: 50%; transform: translateY(-50%); }
.lcdm-lb-zurueck { right: 20px; top: 50%; transform: translateY(-50%); }

@media (max-width: 600px) {
	.lcdm-lb-vor { left: 8px; }
	.lcdm-lb-zurueck { right: 8px; }
	#lcdm-lb h2.lcdm-lb-titel { font-size: 1.05rem; }
	.lcdm-lb-bild { max-height: 60vh; }
}

/* ============================================================
   Benutzer-Symbol im Header
   ============================================================ */

.lcdm-usermenu > .menu-link {
	display: inline-flex !important;
	align-items: center;
	gap: .45rem;
}

.lcdm-usericon {
	display: block;
	color: var(--lions-blue, #00338d);
	transition: color .15s ease;
}

.lcdm-usermenu > .menu-link:hover .lcdm-usericon,
.lcdm-usermenu.current-menu-item > .menu-link .lcdm-usericon {
	color: var(--lions-gold-dark, #b58c00);
}

/* Am Desktop nur das Symbol – die Beschriftung bleibt für Screenreader da. */
@media (min-width: 922px) {
	.lcdm-usermenu .lcdm-userlabel {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
}

/* Im mobilen Menü Symbol und Text nebeneinander. */
@media (max-width: 921px) {
	.lcdm-usericon { width: 18px; height: 18px; }
}

/* „Abmelden" im Untermenü optisch absetzen. */
.lcdm-usermenu .sub-menu .lcdm-abmelden-item {
	border-top: 1px solid rgba(0, 0, 0, .10);
}

.lcdm-usermenu .sub-menu .lcdm-abmelden-item > .menu-link {
	font-size: .9em;
	opacity: .85;
}

/* ============================================================
   Kopfbalken über die volle Fensterbreite
   ------------------------------------------------------------
   Astras „Plain Container" rückt den Inhalt ein, dadurch endet der
   blaue Balken vor dem Fensterrand. Diese Regel zieht ihn wieder
   über die ganze Breite. Auf Seiten im Seitenersteller-Layout ist
   der Wert rechnerisch 0 und die Regel damit wirkungslos.
   ============================================================ */

body.ast-plain-container .lcd-hero,
body.ast-narrow-container .lcd-hero {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Schaltfläche im Hinweis „Kein Zugriff" */
.lcdm-login a.lcdm-zur-galerie {
	display: inline-block;
	background: var(--lions-blue, #00338d);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	padding: .7rem 1.3rem;
	border-radius: 6px;
	margin-top: .3rem;
}

.lcdm-login a.lcdm-zur-galerie:hover {
	background: var(--lions-gold, #ebb700);
	color: #1a1a1a;
}

/* ------------------------------------------------------------
   Farbige Abschnitte über die volle Fensterbreite
   ------------------------------------------------------------
   Wie beim Kopfbalken schneidet Astras „Plain Container" die
   Hintergrundfläche ab. Die Fläche wird ausgestellt, der Inhalt
   bleibt auf Lesebreite zentriert — sonst würde z. B. der blaue
   Spenden-Kasten randlos über den ganzen Bildschirm laufen.
   ------------------------------------------------------------ */

body.ast-plain-container .lcd-section--soft,
body.ast-plain-container .lcd-section--blue,
body.ast-narrow-container .lcd-section--soft,
body.ast-narrow-container .lcd-section--blue {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

body.ast-plain-container .lcd-section--soft > *,
body.ast-plain-container .lcd-section--blue > *,
body.ast-narrow-container .lcd-section--soft > *,
body.ast-narrow-container .lcd-section--blue > * {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}