/* ==========================================================
   Blue Devils DC
   Öffentliche Mediengalerie

   Datei:
   /assets/css/galerie.css
========================================================== */


/* ==========================================================
   Grundlayout der Galerie
========================================================== */

.gallery-page {
	width:min(1380px, 94vw);
	margin:0 auto 90px;
}

.gallery-layout {
	display:grid;
	grid-template-columns:280px minmax(0, 1fr);
	gap:36px;
	align-items:start;
}


/* ==========================================================
   Bereichsüberschriften
========================================================== */

.gallery-section-head {
	display:flex;
	align-items:end;
	justify-content:space-between;
	gap:32px;
	margin-bottom:24px;
}

.gallery-section-head h2 {
	margin:0;
	color:#fff;
	font-size:clamp(1.7rem, 3vw, 2.45rem);
	line-height:1.08;
}

.gallery-eyebrow {
	margin:0 0 8px;
	color:var(--primary2);
	font-size:.76rem;
	font-weight:900;
	letter-spacing:.16em;
	text-transform:uppercase;
}

.gallery-section-copy {
	max-width:470px;
	margin:0;
	color:var(--muted);
	line-height:1.7;
	text-align:right;
}


/* ==========================================================
   Kategorie-Bühne
========================================================== */

.gallery-category-section {
	margin-bottom:32px;
}

.gallery-category-grid {
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:16px;
}


/* ==========================================================
   Kategorie-Karten
========================================================== */

.gallery-category-card {
	position:relative;
	min-height:220px;
	padding:0;
	overflow:hidden;
	border:1px solid rgba(255,255,255,.10);
	border-radius:26px;
	background:
		linear-gradient(
			145deg,
			rgba(28,140,255,.16),
			rgba(8,15,35,.95)
		);
	box-shadow:0 20px 50px rgba(0,0,0,.22);
	color:#fff;
	font:inherit;
	text-align:left;
	cursor:pointer;
	isolation:isolate;
	transition:
		transform .28s ease,
		border-color .28s ease,
		box-shadow .28s ease;
}


/* ==========================================================
   Kategorie-Titelbild und Platzhalter
========================================================== */

.gallery-category-card img,
.gallery-category-card-placeholder {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
}

.gallery-category-card img {
	display:block;
	object-fit:cover;
	transform:scale(1.025);
	transition:transform .55s ease;
}

.gallery-category-card-placeholder {
	display:grid;
	place-items:center;
	background:
		radial-gradient(
			circle at 25% 20%,
			rgba(99,180,255,.34),
			transparent 42%
		),
		linear-gradient(
			145deg,
			#142b5e,
			#081020
		);
	color:rgba(255,255,255,.35);
	font-size:3.5rem;
}


/* ==========================================================
   Abdunklung der Kategorie-Karten
========================================================== */

.gallery-category-card-shade {
	position:absolute;
	inset:0;
	z-index:1;
	background:
		linear-gradient(
			to top,
			rgba(2,5,14,.96) 0%,
			rgba(2,5,14,.60) 46%,
			rgba(2,5,14,.08) 100%
		);
}


/* ==========================================================
   Inhalt der Kategorie-Karten
========================================================== */

.gallery-category-card-content {
	position:absolute;
	inset:auto 0 0;
	z-index:2;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:6px;
	padding:24px;
}

.gallery-category-card-label {
	display:inline-flex;
	width:max-content;
	padding:5px 9px;
	border:1px solid rgba(255,255,255,.16);
	border-radius:999px;
	background:rgba(255,255,255,.10);
	color:rgba(255,255,255,.78);
	font-size:.68rem;
	font-weight:900;
	letter-spacing:.1em;
	text-transform:uppercase;
	backdrop-filter:blur(12px);
}

.gallery-category-card-content strong {
	font-size:1.28rem;
	line-height:1.2;
}

.gallery-category-card-content > span:last-child {
	color:rgba(255,255,255,.72);
	font-size:.88rem;
	font-weight:700;
}


/* ==========================================================
   Hover- und Aktivzustand der Kategorie-Karten
========================================================== */

.gallery-category-card:hover,
.gallery-category-card.active {
	transform:translateY(-5px);
	border-color:rgba(99,180,255,.62);
	box-shadow:
		0 26px 65px rgba(0,0,0,.32),
		0 0 0 1px rgba(99,180,255,.08);
}

.gallery-category-card:hover img,
.gallery-category-card.active img {
	transform:scale(1.1);
}

.gallery-category-card.active::after {
	content:"";
	position:absolute;
	inset:0;
	z-index:3;
	border:2px solid rgba(99,180,255,.72);
	border-radius:inherit;
	pointer-events:none;
}


/* ==========================================================
   Werkzeugleiste
========================================================== */

.gallery-tools {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
	margin-bottom:28px;
	padding:18px;
	border:1px solid rgba(255,255,255,.10);
	border-radius:24px;
	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,.075),
			rgba(255,255,255,.025)
		);
	box-shadow:0 18px 50px rgba(0,0,0,.16);
	backdrop-filter:blur(16px);
}


/* ==========================================================
   Suchfeld
========================================================== */

.gallery-search {
	position:relative;
	flex:1;
	max-width:680px;
}

.gallery-search input {
	width:100%;
	min-height:54px;
	padding:0 54px 0 50px;
	border:1px solid rgba(255,255,255,.11);
	border-radius:17px;
	outline:none;
	background:rgba(3,8,22,.56);
	color:#fff;
	font:inherit;
	transition:
		border-color .25s ease,
		box-shadow .25s ease,
		background .25s ease;
}

.gallery-search input::placeholder {
	color:rgba(159,176,214,.72);
}

.gallery-search input:focus {
	border-color:rgba(99,180,255,.52);
	background:rgba(5,12,30,.82);
	box-shadow:0 0 0 4px rgba(28,140,255,.11);
}


/* ==========================================================
   Suchsymbol
========================================================== */

.gallery-search-icon {
	position:absolute;
	top:50%;
	left:17px;
	width:20px;
	height:20px;
	color:var(--primary2);
	transform:translateY(-50%);
	pointer-events:none;
}

.gallery-search-icon svg,
.gallery-empty-icon svg,
.gallery-zoom-icon svg {
	display:block;
	width:100%;
	height:100%;
	fill:none;
	stroke:currentColor;
	stroke-width:1.8;
	stroke-linecap:round;
	stroke-linejoin:round;
}


/* ==========================================================
   Suche zurücksetzen
========================================================== */

.gallery-search-clear {
	position:absolute;
	top:50%;
	right:10px;
	display:grid;
	place-items:center;
	width:36px;
	height:36px;
	padding:0;
	border:0;
	border-radius:11px;
	background:rgba(255,255,255,.08);
	color:#fff;
	font-size:1.45rem;
	line-height:1;
	cursor:pointer;
	transform:translateY(-50%);
	transition:
		background .22s ease,
		color .22s ease;
}

.gallery-search-clear:hover {
	background:rgba(255,88,120,.18);
	color:#ff7891;
}

.gallery-search-clear.is-hidden {
	display:none;
}


/* ==========================================================
   Ergebnisstatus
========================================================== */

.gallery-result-status {
	display:flex;
	align-items:center;
	gap:7px;
	flex-shrink:0;
	color:var(--muted);
	font-size:.9rem;
	white-space:nowrap;
}

.gallery-result-status strong {
	color:#fff;
	font-size:1.05rem;
}

.gallery-result-divider {
	width:1px;
	height:22px;
	margin:0 7px;
	background:rgba(255,255,255,.12);
}


/* ==========================================================
   Kategorie-Sidebar
========================================================== */

.gallery-sidebar {
	position:sticky;
	top:110px;
	padding:22px;
	border:1px solid rgba(255,255,255,.10);
	border-radius:24px;
	background:
		linear-gradient(
			180deg,
			rgba(255,255,255,.08),
			rgba(255,255,255,.035)
		);
	box-shadow:var(--shadow);
}

.gallery-sidebar-head {
	margin-bottom:16px;
	padding-bottom:16px;
	border-bottom:1px solid rgba(255,255,255,.08);
}

.gallery-sidebar-head p {
	margin:0 0 4px;
	color:var(--primary2);
	font-size:.7rem;
	font-weight:900;
	letter-spacing:.14em;
	text-transform:uppercase;
}

.gallery-sidebar h3 {
	margin:0;
	color:#fff;
	font-size:1.12rem;
	font-weight:900;
}

.gallery-sidebar nav {
	display:grid;
	gap:6px;
}


/* ==========================================================
   Filter-Schaltflächen
========================================================== */

.gallery-filter-btn {
	position:relative;
	display:grid;
	grid-template-columns:1fr auto;
	gap:12px;
	align-items:center;
	width:100%;
	min-height:44px;
	padding:10px 11px 10px 34px;
	border:0;
	border-radius:14px;
	background:transparent;
	color:var(--muted);
	font:inherit;
	font-size:14px;
	line-height:1.35;
	text-align:left;
	cursor:pointer;
	transition:
		color .25s ease,
		background .25s ease;
}

.gallery-filter-btn::before {
	content:"";
	position:absolute;
	left:13px;
	width:8px;
	height:8px;
	border-radius:999px;
	background:rgba(99,180,255,.45);
	box-shadow:0 0 0 4px rgba(99,180,255,.08);
	transition:
		background .25s ease,
		box-shadow .25s ease;
}

.gallery-filter-btn small {
	display:grid;
	place-items:center;
	min-width:28px;
	height:25px;
	padding:0 7px;
	border-radius:999px;
	background:rgba(255,255,255,.06);
	color:rgba(255,255,255,.66);
	font-size:.72rem;
	font-weight:900;
}

.gallery-filter-btn:hover,
.gallery-filter-btn.active {
	color:#fff;
	background:rgba(28,140,255,.14);
}

.gallery-filter-btn.active::before {
	background:var(--primary2);
	box-shadow:
		0 0 0 4px rgba(99,180,255,.13),
		0 0 16px rgba(99,180,255,.55);
}

.gallery-filter-btn.active small {
	background:rgba(28,140,255,.25);
	color:#fff;
}


/* ==========================================================
   Unterkategorien
========================================================== */
/*
.gallery-filter-sub {
	min-height:40px;
	padding-left:50px;
	font-size:13px;
}

.gallery-filter-sub::before {
	left:30px;
	width:6px;
	height:6px;
}
*/

/* ==========================================================
   Unterkategorien

   Die Einrückung richtet sich automatisch nach der Ebene.
========================================================== */

.gallery-filter-btn{

	--gallery-indent: calc(var(--gallery-category-depth,0) * 22px);

	padding-left:calc(34px + var(--gallery-indent));
}

.gallery-filter-btn::before{

	left:calc(13px + var(--gallery-indent));
}

.gallery-filter-btn[data-gallery-depth="0"]{

	font-size:14px;
}

.gallery-filter-btn[data-gallery-depth="1"]{

	font-size:13px;
}

.gallery-filter-btn[data-gallery-depth="2"],
.gallery-filter-btn[data-gallery-depth="3"],
.gallery-filter-btn[data-gallery-depth="4"],
.gallery-filter-btn[data-gallery-depth="5"]{

	font-size:13px;
}


/* ==========================================================
   Filter zurücksetzen
========================================================== */

.gallery-reset-btn {
	width:100%;
	margin-top:16px;
	padding:11px 14px;
	border:1px solid rgba(255,255,255,.09);
	border-radius:14px;
	background:rgba(255,255,255,.035);
	color:var(--muted);
	font:inherit;
	font-size:.82rem;
	font-weight:800;
	cursor:pointer;
	transition:
		border-color .25s ease,
		background .25s ease,
		color .25s ease;
}

.gallery-reset-btn:hover {
	border-color:rgba(99,180,255,.30);
	background:rgba(28,140,255,.10);
	color:#fff;
}


/* ==========================================================
   Galerie-Hauptbereich
========================================================== */

.gallery-main {
	min-width:0;
}

.gallery-active-filter {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	margin-bottom:16px;
	padding:0 4px;
}

.gallery-active-filter div {
	display:flex;
	align-items:baseline;
	gap:9px;
}

.gallery-active-filter span {
	color:var(--muted);
	font-size:.78rem;
	font-weight:800;
}

.gallery-active-filter strong {
	color:#fff;
	font-size:.98rem;
}

.gallery-active-filter-dot {
	width:8px;
	height:8px;
	border-radius:999px;
	background:var(--success);
	box-shadow:0 0 14px rgba(72,226,167,.5);
}


/* ==========================================================
   Medienraster
========================================================== */

.gallery-grid {
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:18px;
}


/* ==========================================================
   Medienkarte
========================================================== */

.gallery-item {
	padding:0;
	overflow:hidden;
	border:1px solid rgba(255,255,255,.10);
	border-radius:26px;
	background:
		linear-gradient(
			180deg,
			rgba(255,255,255,.075),
			rgba(255,255,255,.03)
		);
	box-shadow:0 18px 45px rgba(0,0,0,.18);
	transition:
		transform .28s ease,
		border-color .28s ease,
		box-shadow .28s ease;
}

.gallery-item:hover {
	transform:translateY(-4px);
	border-color:rgba(28,140,255,.42);
	box-shadow:0 25px 60px rgba(0,0,0,.28);
}

.gallery-item.is-hidden {
	display:none;
}


/* ==========================================================
   Medienlink
========================================================== */

.gallery-link {
	position:relative;
	display:block;
	overflow:hidden;
	aspect-ratio:4 / 3;
	border-radius:24px;
	background:var(--panel);
	isolation:isolate;
}


/* ==========================================================
   Bilder und Videos in Medienkarten
========================================================== */

.gallery-link img,
.gallery-link video {
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	background:#02050e;
	transform:scale(1.02);
	transition:
		transform .55s cubic-bezier(.2,.7,.2,1),
		filter .35s ease;
}

.gallery-link:hover img,
.gallery-link:hover video {
	transform:scale(1.09);
	filter:saturate(1.08);
}


/* ==========================================================
   Video-Vorschau

   Die Vorschau selbst soll nicht bedienbar sein.
   Die Wiedergabe erfolgt erst in der Lightbox.
========================================================== */

.gallery-card-video {
	pointer-events:none;
}


/* ==========================================================
   Medientyp-Kennzeichnung
========================================================== */

.gallery-media-type {
	position:absolute;
	top:16px;
	left:16px;
	z-index:4;
	display:inline-flex;
	align-items:center;
	width:max-content;
	padding:6px 10px;
	border:1px solid rgba(255,255,255,.16);
	border-radius:999px;
	background:rgba(5,10,24,.68);
	color:#fff;
	font-size:.68rem;
	font-weight:900;
	letter-spacing:.05em;
	text-transform:uppercase;
	backdrop-filter:blur(12px);
}


/* ==========================================================
   Großes Video-Play-Symbol
========================================================== */

.gallery-play-icon {
	position:absolute;
	top:50%;
	left:50%;
	z-index:3;
	display:grid;
	place-items:center;
	width:68px;
	height:68px;
	padding:21px;
	border:1px solid rgba(255,255,255,.24);
	border-radius:50%;
	background:rgba(5,10,24,.72);
	color:#fff;
	transform:translate(-50%, -50%);
	box-shadow:0 18px 45px rgba(0,0,0,.35);
	backdrop-filter:blur(14px);
	transition:
		transform .28s ease,
		background .28s ease,
		border-color .28s ease;
}

.gallery-play-icon svg {
	display:block;
	width:100%;
	height:100%;
	fill:currentColor;
	stroke:none;
}

.gallery-link:hover .gallery-play-icon {
	border-color:rgba(99,180,255,.62);
	background:
		linear-gradient(
			135deg,
			var(--primary),
			var(--primary2)
		);
	transform:translate(-50%, -50%) scale(1.08);
}


/* ==========================================================
   Dunkler Verlauf über dem Medium
========================================================== */

.gallery-image-shade {
	position:absolute;
	inset:0;
	z-index:1;
	background:
		linear-gradient(
			to top,
			rgba(1,4,12,.92) 0%,
			rgba(1,4,12,.46) 42%,
			rgba(1,4,12,.04) 74%
		);
	transition:background .3s ease;
}

.gallery-link:hover .gallery-image-shade {
	background:
		linear-gradient(
			to top,
			rgba(1,4,12,.96) 0%,
			rgba(1,4,12,.52) 46%,
			rgba(1,4,12,.08) 78%
		);
}


/* ==========================================================
   Titel und Beschreibung auf Medienkarten
========================================================== */

.gallery-overlay {
	position:absolute;
	inset:auto 0 0;
	z-index:2;
	display:flex;
	flex-direction:column;
	gap:7px;
	padding:65px 20px 20px;
	color:#fff;
}

.gallery-category {
	width:max-content;
	max-width:100%;
	padding:5px 10px;
	border:1px solid rgba(255,255,255,.16);
	border-radius:999px;
	background:rgba(28,140,255,.82);
	font-size:.72rem;
	font-weight:900;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	backdrop-filter:blur(12px);
}

.gallery-overlay strong {
	font-size:1.08rem;
	line-height:1.25;
}

.gallery-caption-preview {
	display:-webkit-box;
	overflow:hidden;
	color:rgba(255,255,255,.68);
	font-size:.82rem;
	line-height:1.45;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}


/* ==========================================================
   Aktionssymbol oben rechts
========================================================== */

.gallery-zoom-icon {
	position:absolute;
	top:16px;
	right:16px;
	z-index:4;
	display:grid;
	place-items:center;
	width:42px;
	height:42px;
	padding:11px;
	border:1px solid rgba(255,255,255,.16);
	border-radius:14px;
	background:rgba(5,10,24,.52);
	color:#fff;
	opacity:0;
	transform:translateY(-8px);
	backdrop-filter:blur(12px);
	transition:
		opacity .28s ease,
		transform .28s ease,
		background .28s ease;
}

.gallery-link:hover .gallery-zoom-icon {
	opacity:1;
	transform:translateY(0);
}

.gallery-zoom-icon:hover {
	background:rgba(28,140,255,.84);
}


/* ==========================================================
   Leere Zustände
========================================================== */

.gallery-no-results {
	margin-top:20px;
}

.gallery-no-results.is-hidden {
	display:none;
}

.gallery-empty-section {
	width:min(900px, 92vw);
	margin:0 auto;
}

.gallery-empty {
	padding:55px 30px;
	text-align:center;
}

.gallery-empty h2 {
	margin:18px 0 8px;
	color:#fff;
}

.gallery-empty p {
	max-width:520px;
	margin:0 auto;
	line-height:1.7;
}

.gallery-empty .btn {
	margin-top:22px;
}

.gallery-empty-icon {
	display:grid;
	place-items:center;
	width:70px;
	height:70px;
	margin:0 auto;
	padding:18px;
	border:1px solid rgba(99,180,255,.22);
	border-radius:23px;
	background:rgba(28,140,255,.11);
	color:var(--primary2);
}


/* ==========================================================
   Pagination
========================================================== */

.gallery-pagination {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	gap:10px;
	margin-top:30px;
}

.gallery-pagination:empty {
	display:none;
}

.gallery-pagination button {
	min-width:44px;
	height:44px;
	padding:0 13px;
	border:1px solid rgba(255,255,255,.12);
	border-radius:14px;
	background:rgba(255,255,255,.06);
	color:var(--text);
	font:inherit;
	font-weight:800;
	cursor:pointer;
	transition:
		transform .25s ease,
		background .25s ease,
		border-color .25s ease;
}

.gallery-pagination button:hover,
.gallery-pagination button.active {
	border-color:rgba(99,180,255,.45);
	background:
		linear-gradient(
			135deg,
			var(--primary),
			var(--primary2)
		);
	color:#fff;
	transform:translateY(-2px);
}

.gallery-pagination button.active {
	box-shadow:0 10px 24px rgba(28,140,255,.25);
}

.gallery-pagination button:disabled {
	opacity:.32;
	cursor:not-allowed;
	transform:none;
}

.pagination-dots {
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:42px;
	height:42px;
	color:var(--muted);
	font-weight:800;
	user-select:none;
}


/* ==========================================================
   Medien-Lightbox
========================================================== */

.lightbox {
	position:fixed;
	inset:0;
	z-index:9999;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:28px;
	background:rgba(2,5,14,.93);
	backdrop-filter:blur(20px);
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:
		opacity .25s ease,
		visibility .25s ease;
}

.lightbox.is-open {
	opacity:1;
	visibility:visible;
	pointer-events:auto;
}


/* ==========================================================
   Lightbox-Inhalt
========================================================== */

.lightbox-content {
	width:min(1080px, calc(100vw - 150px));
	max-height:calc(100vh - 70px);
	margin:0 auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	transform:scale(.975);
	transition:transform .28s ease;
}

.lightbox.is-open .lightbox-content {
	transform:scale(1);
}


/* ==========================================================
   Lightbox-Medienbereich
========================================================== */

.lightbox-image-wrap {
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:220px;
}

.lightbox[data-media-type="video"] .lightbox-image-wrap {
	min-height:0;
}


/* ==========================================================
   Versteckte Lightbox-Medien
========================================================== */

.lightbox-image-wrap .is-hidden {
	display:none;
}


/* ==========================================================
   Bild und Video in der Lightbox
========================================================== */

.lightbox-content img,
.lightbox-content video {
	display:block;
	width:auto;
	height:auto;
	max-width:100%;
	max-height:74vh;
	object-fit:contain;
	margin:0 auto;
	border:1px solid rgba(255,255,255,.16);
	border-radius:24px;
	background:#000;
	box-shadow:0 30px 90px rgba(0,0,0,.6);
	opacity:1;
	transition:opacity .2s ease;
}


/* ==========================================================
   Videoplayer in der Lightbox
========================================================== */

.lightbox-content video {
	width:min(100%, 1100px);
	aspect-ratio:16 / 9;
}


/* ==========================================================
   Ladezustand
========================================================== */

.lightbox.is-loading .lightbox-content img,
.lightbox.is-loading .lightbox-content video {
	opacity:.2;
}


/* ==========================================================
   Lightbox-Beschriftung
========================================================== */

.lightbox-content figcaption {
	width:min(780px, 100%);
	margin-top:16px;
	color:#fff;
}

.lightbox-meta {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	margin-bottom:8px;
	color:var(--muted);
	font-size:.78rem;
	font-weight:800;
}

#lightbox-category {
	display:inline-flex;
	padding:5px 10px;
	border-radius:999px;
	background:rgba(28,140,255,.15);
	color:var(--primary2);
}

#lightbox-counter {
	padding:5px 10px;
	border-radius:999px;
	background:rgba(255,255,255,.07);
}

.lightbox-content figcaption strong {
	display:block;
	margin-bottom:6px;
	font-size:1.22rem;
	line-height:1.35;
}

.lightbox-content figcaption > span {
	display:block;
	color:var(--muted);
	line-height:1.6;
}

.lightbox-content figcaption > span:empty {
	display:none;
}


/* ==========================================================
   Lightbox-Schaltflächen
========================================================== */

.lightbox-close,
.lightbox-nav {
	position:absolute;
	z-index:4;
	border:1px solid rgba(255,255,255,.14);
	background:rgba(255,255,255,.08);
	color:#fff;
	cursor:pointer;
	backdrop-filter:blur(14px);
	transition:
		transform .25s ease,
		background .25s ease,
		border-color .25s ease;
}


/* ==========================================================
   Lightbox schließen
========================================================== */

.lightbox-close {
	top:22px;
	right:22px;
	display:grid;
	place-items:center;
	width:48px;
	height:48px;
	padding:0;
	border-radius:50%;
	font-size:2rem;
	line-height:1;
}


/* ==========================================================
   Vorheriges und nächstes Medium
========================================================== */

.lightbox-nav {
	top:50%;
	width:56px;
	height:76px;
	border-radius:20px;
	font-size:3rem;
	line-height:1;
	transform:translateY(-50%);
}

.lightbox-prev {
	left:24px;
}

.lightbox-next {
	right:24px;
}

.lightbox-close:hover,
.lightbox-nav:hover {
	border-color:rgba(99,180,255,.50);
	background:
		linear-gradient(
			135deg,
			var(--primary),
			var(--primary2)
		);
}

.lightbox-nav:hover {
	transform:translateY(-50%) scale(1.045);
}

.lightbox-close:hover {
	transform:scale(1.045);
}

.lightbox-nav:disabled {
	opacity:.28;
	cursor:not-allowed;
	transform:translateY(-50%);
}


/* ==========================================================
   Lightbox-Ladeanzeige
========================================================== */

.lightbox-loader {
	position:absolute;
	top:50%;
	left:50%;
	z-index:3;
	display:none;
	transform:translate(-50%, -50%);
}

.lightbox.is-loading .lightbox-loader {
	display:block;
}

.lightbox-loader span {
	display:block;
	width:52px;
	height:52px;
	border:4px solid rgba(255,255,255,.15);
	border-top-color:var(--primary2);
	border-radius:50%;
	animation:gallery-loader .75s linear infinite;
}

@keyframes gallery-loader {
	to {
		transform:rotate(360deg);
	}
}


/* ==========================================================
   Nur für Screenreader
========================================================== */

.sr-only {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0, 0, 0, 0);
	white-space:nowrap;
	border:0;
}


/* ==========================================================
   Responsive: mittlere Bildschirmgrößen
========================================================== */

@media (max-width:1180px) {

	.gallery-category-grid {
		grid-template-columns:repeat(2, minmax(0, 1fr));
	}

	.gallery-category-card {
		min-height:200px;
	}

}


/* ==========================================================
   Responsive: Tablet
========================================================== */

@media (max-width:1000px) {

	.gallery-layout {
		grid-template-columns:1fr;
	}

	.gallery-sidebar {
		position:relative;
		top:auto;
	}

	.gallery-sidebar nav {
		grid-template-columns:repeat(2, minmax(0, 1fr));
	}

	.gallery-reset-btn {
		width:auto;
	}

	.gallery-tools {
		align-items:stretch;
		flex-direction:column;
	}

	.gallery-search {
		max-width:none;
	}

	.gallery-result-status {
		justify-content:center;
	}

}


/* ==========================================================
   Responsive: Smartphone
========================================================== */

@media (max-width:700px) {

	.gallery-page {
		width:min(94vw, 100%);
		margin-bottom:65px;
	}

	.gallery-section-head {
		align-items:flex-start;
		flex-direction:column;
		gap:12px;
	}

	.gallery-section-copy {
		text-align:left;
	}

	.gallery-category-grid {
		display:flex;
		gap:14px;
		margin-right:-3vw;
		padding-right:3vw;
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		scrollbar-width:none;
	}

	.gallery-category-grid::-webkit-scrollbar {
		display:none;
	}

	.gallery-category-card {
		flex:0 0 78vw;
		min-height:205px;
		scroll-snap-align:start;
	}

	.gallery-tools {
		padding:14px;
		border-radius:20px;
	}

	.gallery-result-status {
		flex-wrap:wrap;
		font-size:.82rem;
	}

	.gallery-sidebar {
		padding:17px;
		border-radius:20px;
	}

	.gallery-sidebar nav {
		grid-template-columns:1fr;
	}

	.gallery-grid {
		grid-template-columns:1fr;
	}

	.gallery-active-filter {
		align-items:flex-start;
	}

	.gallery-active-filter div {
		align-items:flex-start;
		flex-direction:column;
		gap:3px;
	}

	.gallery-link {
		aspect-ratio:4 / 3;
	}

	.gallery-media-type {
		top:12px;
		left:12px;
	}

	.gallery-zoom-icon {
		top:12px;
		right:12px;
		opacity:1;
		transform:none;
	}

	.gallery-play-icon {
		width:60px;
		height:60px;
		padding:18px;
	}

	.lightbox {
		padding:74px 14px 24px;
	}

	.lightbox-content {
		width:100%;
		max-height:100%;
	}

	.lightbox-content img,
	.lightbox-content video {
		max-height:66vh;
		border-radius:18px;
	}

	.lightbox-content video {
		width:100%;
		height:auto;
		aspect-ratio:16 / 9;
	}

	.lightbox-close {
		top:14px;
		right:14px;
	}

	.lightbox-nav {
		top:auto;
		bottom:18px;
		width:50px;
		height:50px;
		border-radius:16px;
		font-size:2.4rem;
		transform:none;
	}

	.lightbox-prev {
		left:16px;
	}

	.lightbox-next {
		right:16px;
	}

	.lightbox-nav:hover {
		transform:scale(1.04);
	}

	.lightbox-nav:disabled {
		transform:none;
	}

	.lightbox-content figcaption {
		padding:0 48px;
	}

	.lightbox-meta {
		flex-wrap:wrap;
	}

}


/* ==========================================================
   Sehr kleine Smartphones
========================================================== */

@media (max-width:430px) {

	.gallery-category-card {
		flex-basis:84vw;
	}

	.gallery-category-card-content {
		padding:20px;
	}

	.gallery-search input {
		font-size:.9rem;
	}

	.gallery-pagination {
		gap:7px;
	}

	.gallery-pagination button,
	.pagination-dots {
		min-width:39px;
		height:39px;
		padding:0 10px;
		border-radius:12px;
	}

	.gallery-play-icon {
		width:54px;
		height:54px;
		padding:16px;
	}

	.gallery-media-type {
		padding:5px 8px;
		font-size:.62rem;
	}

}


/* ==========================================================
   Reduzierte Animationen
========================================================== */

@media (prefers-reduced-motion:reduce) {

	.gallery-category-card,
	.gallery-category-card img,
	.gallery-item,
	.gallery-link img,
	.gallery-link video,
	.gallery-play-icon,
	.gallery-zoom-icon,
	.gallery-pagination button,
	.lightbox,
	.lightbox-content,
	.lightbox-content img,
	.lightbox-content video {
		transition:none;
	}

	.lightbox-loader span {
		animation:none;
	}

}