/**
 * Spicher – Galerie-Lightbox
 * =============================================================================
 * Breakdance öffnet Galerie-Bilder in lightGallery (Klassen .lg-*). Dieses CSS
 * passt sie an das Design an. Es wird nur auf Serien-Seiten und ganz am Ende
 * der Seite geladen, damit es nach dem lightGallery-CSS kommt.
 * JS: assets/js/gallery.js (Bildunterschrift, mobile Leiste, Desktop-Tooltip)
 *
 * Inhalt
 *   1. Allgemein (alle Größen)
 *   2. Desktop-Tooltip
 *   3. Sequence: Werknummer
 *   4. Mobil bis 767 px (Mockup "Lightbox · Mobile")
 * =============================================================================
 */


/* 1. Allgemein
   ========================================================================== */

/* Nur Schließen-Kreuz und Zähler – kein Zoom, kein Vollbild */
.lg-outer .lg-toolbar .lg-fullscreen,
.lg-outer .lg-toolbar .lg-zoom-in,
.lg-outer .lg-toolbar .lg-zoom-out,
.lg-outer .lg-toolbar .lg-actual-size { display: none; }

/* Abstand des Bilds zum Fensterrand (Platz für die Pfeile) */
.lg-outer .lg-img-wrap {
	box-sizing: border-box;
	padding-left: 96px;
	padding-right: 96px;
}

/* Pfeile: helle Fläche, gerade so sichtbar */
.lg-outer .lg-prev,
.lg-outer .lg-next {
	color: #000;
	background-color: #ecebe8;
	border-radius: 3px;
}
.lg-outer .lg-prev:hover,
.lg-outer .lg-next:hover {
	color: #000;
	background-color: #e3e1dc;
}

/* Bildunterschrift unten (Touch-Geräte / wenn kein Tooltip) */
.lg-outer .lg-sub-html,
.lg-outer .lg-sub-html .ee-gallery-item-caption {
	font-family: "Rubik", sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.4em;
	letter-spacing: 0;
	text-transform: none;
	color: #4a4a4a;
}

/* Bausteine aus gallery.js: Titel normal, Trenner sichtbar (einzeilig) */
.ss-lb-t { font-weight: inherit; }
.ss-lb-row { display: none; }               /* Leiste gibt es nur mobil */


/* 2. Desktop-Tooltip (nur Geräte mit Maus)
   ==========================================================================
   gallery.js setzt html.ss-lg-tip und erzeugt div.ss-lg-tooltip. */

.ss-lg-tooltip {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
	max-width: 80vw;
	padding: 10px 14px;
	font-family: "Rubik", sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.4em;
	color: #4a4a4a;
	white-space: nowrap;
	background: rgba(255, 255, 255, .94);
	border-radius: 2px;
	box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .3);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
	will-change: transform;
}
.ss-lg-tooltip.is-on { opacity: 1; }

/* Mit Tooltip die Bildunterschrift unten ausblenden */
.ss-lg-tip .lg-outer .lg-sub-html {
	opacity: 0 !important;
	pointer-events: none;
}


/* 3. Sequence: Werknummer hinter der Bildunterschrift (span aus gallery.js)
   ========================================================================== */

.ss-cap-n {
	display: inline-block;
	margin-left: 20px;
	color: #8f8a80;
	white-space: nowrap;
}


/* 4. Mobil bis 767 px
   ==========================================================================
   Aufbau: oben SPICHER + runder Schließen-Button · Bild · Bilddaten in drei
   Zeilen · Leiste [Enquire about this work] [22 / 27] [←][→].
   lightGallery misst Toolbar- (92 px) und Untertitel-Höhe (172 px) und gibt dem
   Bild den Platz dazwischen – die beiden Höhen also nur gemeinsam ändern. */

@media (max-width: 767px) {

	/* Kopfzeile ------------------------------------------------------------ */
	.lg-outer .lg-toolbar.lg-group {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 92px;
		box-sizing: border-box;
		padding: 18px 20px;
		background: none;
	}
	.lg-outer .lg-toolbar.lg-group::before {          /* Logo-Schriftzug */
		content: "SPICHER";
		font-family: "Rubik", sans-serif;
		font-size: 20px;
		font-weight: 600;
		line-height: 1;
		letter-spacing: 2px;
		color: #e94834;
	}
	.lg-outer .lg-toolbar.lg-group::after { display: none; } /* Clearfix von lightGallery stört das Flex-Layout */

	.lg-outer .lg-toolbar .lg-close.lg-icon {
		float: none;
		width: 56px;
		height: 56px;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		border: 1px solid #c9c4b9;
		border-radius: 50%;
		background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cline x1='2' y1='2' x2='16' y2='16'/%3E%3Cline x1='16' y1='2' x2='2' y2='16'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
	}
	.lg-outer .lg-toolbar .lg-close.lg-icon::after { display: none; } /* Icon-Font-Kreuz aus */

	/* Bild: Breite = linke Logokante bis rechte Kante des Schließen-Kreises */
	.lg-outer .lg-item .lg-img-wrap { padding: 0 20px; }
	.lg-outer .lg-current .lg-object.lg-image { box-shadow: 0 14px 28px -18px rgba(0, 0, 0, .22); }

	/* Bilddaten ------------------------------------------------------------ */
	.lg-outer .lg-components .lg-sub-html {
		position: absolute;
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		display: block;
		height: 172px;
		min-height: 0;
		box-sizing: border-box;
		padding: 18px 20px 0;
		background: none;
		text-align: left;
		font-family: "Rubik", sans-serif;
		font-size: 15px;
		font-weight: 300;
		line-height: 1.4em;
		color: #4a4a4a;
	}
	.ss-lb-cap { display: flex; flex-direction: column; gap: 3px; }
	.ss-lb-t { font-weight: 500; color: #000; }
	.ss-lb-sep { display: none; }

	/* Leiste unten --------------------------------------------------------- */
	.ss-lb-row {
		position: absolute;
		left: 20px;
		right: 20px;
		bottom: 18px;
		z-index: 1090;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}

	.ss-lb-enq {
		flex: 0 1 auto;
		padding: 12px 0 4px;
		font-family: "Rubik", sans-serif;
		font-size: 12px;
		font-weight: 400;
		line-height: 1.4em;
		letter-spacing: .14em;
		text-transform: uppercase;
		text-decoration: none;
		color: #000;
		border-bottom: 1px solid #e94834;
	}

	.lg-outer .ss-lb-row .lg-counter {
		position: static;
		float: none;
		display: block;
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
		font-family: "Rubik", sans-serif;
		font-size: 13px;
		font-weight: 400;
		line-height: 1;
		letter-spacing: .08em;
		color: #000;
		white-space: nowrap;
	}

	.ss-lb-arrows { display: flex; flex: 0 0 auto; gap: 10px; }

	.lg-outer .ss-lb-arrows .lg-prev.lg-icon,
	.lg-outer .ss-lb-arrows .lg-next.lg-icon {
		position: static;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		display: block;
		width: 48px;
		height: 48px;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		border: 1px solid #c9c4b9;
		border-radius: 50%;
		opacity: 1;
		transform: none;
		background-color: transparent;
		background-position: center;
		background-size: 20px 12px;
		background-repeat: no-repeat;
	}
	.lg-outer .ss-lb-arrows .lg-prev.lg-icon {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cline x1='20' y1='6' x2='2' y2='6'/%3E%3Cpolyline points='7,1 2,6 7,11'/%3E%3C/svg%3E");
	}
	.lg-outer .ss-lb-arrows .lg-next.lg-icon {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cline x1='0' y1='6' x2='18' y2='6'/%3E%3Cpolyline points='13,1 18,6 13,11'/%3E%3C/svg%3E");
	}
	.lg-outer .ss-lb-arrows .lg-prev::before,
	.lg-outer .ss-lb-arrows .lg-prev::after,
	.lg-outer .ss-lb-arrows .lg-next::before,
	.lg-outer .ss-lb-arrows .lg-next::after { display: none; } /* Icon-Font-Pfeile aus */
}