/* web/css/app.css
 *
 * Eigenes CSS von blicklichtgewitter. Bootstrap-Klassen gehen vor, mobile first.
 * Farben ueber Variablen, damit helles und dunkles Farbschema (data-bs-theme,
 * folgt dem System) funktionieren. Kontrast: Akzentfarbe auf Hintergrund >= 4.5:1.
 */

:root,
[data-bs-theme="light"] {
	--blg-lila: #8e2de2;          /* 5,8:1 auf Weiss */
	--blg-lila-dunkel: #6a1fb0;
	--blg-lila-text: #7a22c9;     /* Links/Text, 7:1 auf Weiss */
	--blg-flaeche: #f6f2fb;       /* Abschnittshintergrund */
	--bs-link-color: var(--blg-lila-text);
	--bs-link-color-rgb: 122, 34, 201;
	--bs-link-hover-color: var(--blg-lila-dunkel);
	--bs-link-hover-color-rgb: 106, 31, 176;
}

[data-bs-theme="dark"] {
	--blg-lila: #b57af0;          /* 5,2:1 auf #212529 */
	--blg-lila-dunkel: #8e2de2;
	--blg-lila-text: #c99bf4;
	--blg-flaeche: #2a2430;
	--bs-link-color: var(--blg-lila-text);
	--bs-link-color-rgb: 201, 155, 244;
	--bs-link-hover-color: #ddc0f8;
	--bs-link-hover-color-rgb: 221, 192, 248;
}

body {
	overflow-x: clip;
}

.container-blg {
	max-width: 1440px;
}

/* Sprungmarke sichtbar und gut lesbar */
.blg-sprung:focus {
	position: absolute;
	z-index: 2000;
	top: .5rem;
	left: .5rem;
	padding: .5rem 1rem;
	background: var(--bs-body-bg);
	border: 2px solid var(--blg-lila);
	border-radius: .375rem;
}

main:focus {
	outline: none;
}

/* Deutlicher Tastaturfokus ueberall */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--blg-lila);
	outline-offset: 2px;
	box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Kopf und Navigation
 * ------------------------------------------------------------------------- */

.blg-nav .blg-logo {
	font-size: 1.6rem;
	line-height: 1;
	letter-spacing: .05em;
	font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

.blg-nav .blg-marke {
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--blg-lila-text);
}

.blg-nav .nav-link {
	color: var(--bs-body-color);
}

.blg-nav .nav-link:hover,
.blg-nav .nav-link.active {
	color: var(--blg-lila-text);
}

.blg-nav .nav-link.active {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: .35em;
	text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------------------
 * Knoepfe
 * ------------------------------------------------------------------------- */

.btn-blg {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--blg-lila-dunkel);
	--bs-btn-border-color: var(--blg-lila-dunkel);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #57188f;
	--bs-btn-hover-border-color: #57188f;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #4b1480;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--blg-lila-dunkel);
	background-image: linear-gradient(45deg, #57188f, var(--blg-lila-dunkel));
}

.btn-outline-blg {
	--bs-btn-color: var(--blg-lila-text);
	--bs-btn-border-color: var(--blg-lila);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--blg-lila-dunkel);
	--bs-btn-hover-border-color: var(--blg-lila-dunkel);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--blg-lila-dunkel);
}

.pagination {
	--bs-pagination-color: var(--blg-lila-text);
	--bs-pagination-hover-color: var(--blg-lila-dunkel);
	--bs-pagination-active-bg: var(--blg-lila-dunkel);
	--bs-pagination-active-border-color: var(--blg-lila-dunkel);
}

.nav-pills {
	--bs-nav-pills-link-active-bg: var(--blg-lila-dunkel);
	--bs-nav-link-color: var(--blg-lila-text);
	--bs-nav-link-hover-color: var(--blg-lila-dunkel);
}

/* ---------------------------------------------------------------------------
 * Texte
 * ------------------------------------------------------------------------- */

.blg-abschnitt {
	background: var(--blg-flaeche);
	border-radius: .5rem;
	padding: 1.25rem;
}

@media (min-width: 768px) {
	.blg-abschnitt {
		padding: 2rem;
	}
}

/* Mehrspaltiger Fliesstext: Spalten ergeben sich aus der Breite, Text linksbuendig
   (Blocksatz erschwert das Lesen) */
.blg-spalten {
	column-width: 22rem;
	column-gap: 3rem;
	column-rule: 1px solid var(--bs-border-color);
	line-height: 1.7;
}

.blg-spalten p:first-child {
	margin-top: 0;
}

.blg-hinweis-ki {
	opacity: .85;
}

.blg-text {
	line-height: 1.7;
}

.blg-text img {
	max-width: 100%;
	height: auto;
	border-radius: .375rem;
}

.blg-text .row + .row,
.blg-text p + .row,
.blg-text .row + p {
	margin-top: 1rem;
}

.blg-rechtstext {
	max-width: 52rem;
}

/* ---------------------------------------------------------------------------
 * Startseite: Kopf mit Video
 * ------------------------------------------------------------------------- */

.blg-held {
	position: relative;
	overflow: hidden;
	border-radius: .5rem;
	min-height: 22rem;
	display: grid;
	place-items: center;
	text-align: center;
	color: #fff;
	background: #1d1428;
}

.blg-held-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blg-held-text {
	position: relative;
	max-width: 48rem;
	margin: 2rem 1rem;
	padding: 1.5rem;
	border-radius: .5rem;
	background: rgba(20, 10, 30, .62);   /* Lesbarkeit auf jedem Videobild */
}

.blg-held-pause {
	position: absolute;
	right: .75rem;
	bottom: .75rem;
	z-index: 2;
}

/* ---------------------------------------------------------------------------
 * Bilder
 * ------------------------------------------------------------------------- */

.blg-tagesbild-bild {
	width: 100%;
	height: auto;
	max-height: 80vh;
	object-fit: contain;
	background: #000;
}

/* Tagesbild-Archiv als Mauerwerk (web/js/mauer.js) */
.blg-mauer {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	align-items: start;
}

@media (min-width: 576px) {
	.blg-mauer {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.blg-mauer {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.blg-mauer-aktiv {
	grid-auto-rows: 4px;
	row-gap: 0;
}

.blg-mauer-aktiv .blg-mauer-stein > figure {
	margin-bottom: 1rem !important;
}

.blg-mauer-stein .card {
	border-color: var(--blg-lila);
}

.blg-mauer-bild {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}

.blg-mauer-bild img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .3s ease;
}

.blg-mauer-bild:hover img,
.blg-mauer-bild:focus-visible img {
	transform: scale(1.04);
}

.blg-mauer-gross {
	position: absolute;
	top: .5rem;
	right: .5rem;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: .375rem;
	color: #fff;
	background: rgba(33, 37, 41, .85);
}

.blg-slider img {
	height: auto;
	max-height: 75vh;
	object-fit: cover;
}

.blg-caption {
	background: rgba(0, 0, 0, .55);
	border-radius: .375rem;
	padding: .5rem 1rem;
	left: 10%;
	right: 10%;
	bottom: 2.5rem;
}

.blg-lady {
	max-height: 650px;
	object-fit: cover;
}

/* Parallax: Hintergrund steht still, die Seite scrollt darueber */
.blg-parallax {
	height: 45vh;
	min-height: 260px;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

/* iOS/Android koennen "fixed" nicht sinnvoll - dort normal mitscrollen */
@media (hover: none), (prefers-reduced-motion: reduce) {
	.blg-parallax {
		background-attachment: scroll;
	}
}

/* Blog-Anrisse */
.blg-anriss {
	transition: box-shadow .2s ease;
}

.blg-anriss:hover,
.blg-anriss:focus-within {
	box-shadow: 0 0 0 2px var(--blg-lila);
}

.blg-anriss-bild {
	width: 100%;
	height: 100%;
	min-height: 12rem;
	max-height: 20rem;
	object-fit: cover;
}

.blg-anriss-link {
	color: var(--blg-lila-text);
	text-decoration: none;
}

.blg-weiter {
	color: var(--blg-lila-text);
}

/* Volle Fensterbreite aus einem Container heraus */
.blg-volle-breite {
	width: 100vw;
	position: relative;
	left: 50%;
	margin-left: -50vw;
}

/* ---------------------------------------------------------------------------
 * Karten
 * ------------------------------------------------------------------------- */

.blg-karte {
	min-height: 12rem;
	background: var(--blg-flaeche);
	display: grid;
	place-items: center;
}

.blg-karte-hinweis {
	max-width: 36rem;
	padding: 1.5rem;
	text-align: center;
}

.blg-karte-aktiv {
	display: block;
	height: min(var(--blg-karte-hoehe, 500px), 70vh);
}

.blg-zeitfilter {
	background: var(--blg-flaeche);
	border-radius: .375rem .375rem 0 0;
}

.leaflet-popup-content img {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * Panoramen
 * ------------------------------------------------------------------------- */

.blg-pano-rahmen {
	position: relative;
	background: #000;
	min-height: 12rem;
}

.blg-pano-vorschau {
	display: block;
	width: 100%;
	height: auto;
}

.blg-pano-knopf {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 1rem;
}

/* Lupe fuer flache Panoramen (web/js/pano.js) */
.blg-lupe-flaeche {
	position: relative;
	overflow: hidden;
	cursor: crosshair;
	touch-action: none;
}

.blg-lupe-flaeche img {
	display: block;
	width: 100%;
	height: auto;
}

.blg-lupe-glas {
	position: absolute;
	width: clamp(140px, 22vw, 280px);
	aspect-ratio: 1;
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .45);
	background-color: #000;
	background-repeat: no-repeat;
	pointer-events: none;
}

.blg-lupe .blg-pano-werkzeug {
	position: static;
	justify-content: flex-end;
	padding: .5rem .75rem;
	background: #000;
}

.blg-pano-360 {
	height: 70vh;
	min-height: 420px;
}

/* ---------------------------------------------------------------------------
 * Vorher/Nachher-Vergleich (Library VorherNachher, Aussehen nur ueber --vn-*)
 * ------------------------------------------------------------------------- */

.blg-vergleich {
	margin: 1.5rem 0;
}

.blg-vergleich .vorhernachher {
	border-radius: .375rem;
	--vn-label-hintergrund: rgba(0, 0, 0, .65);
}

/* Keine Regeln fuer die Bilder selbst: Seiten-CSS schlaegt ::slotted der Library.
   Ohne JavaScript setzt app/teile/vergleich.php ein <noscript>-Stylesheet. */

/* ---------------------------------------------------------------------------
 * Grossansicht (web/js/galerie.js)
 * ------------------------------------------------------------------------- */

.blg-galerie {
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 3rem 1rem 1rem;
	border: 0;
	background: rgba(0, 0, 0, .94);
	color: #fff;
}

.blg-galerie::backdrop {
	background: rgba(0, 0, 0, .8);
}

.blg-galerie figure {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.blg-galerie img {
	max-width: 100%;
	max-height: calc(100% - 3rem);
	object-fit: contain;
}

.blg-galerie-text {
	margin-top: .5rem;
	text-align: center;
}

.blg-galerie-zu {
	position: absolute;
	top: .5rem;
	right: .5rem;
}

.blg-galerie-zurueck,
.blg-galerie-vor {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.blg-galerie-zurueck {
	left: .5rem;
}

.blg-galerie-vor {
	right: .5rem;
}

/* ---------------------------------------------------------------------------
 * Fuss
 * ------------------------------------------------------------------------- */

.blg-fuss a {
	text-decoration-thickness: 1px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* Unauffaelliger Link in Metazeilen (Ort, Datum) - Kontrast in beiden Schemata */
.blg-link-leise {
	color: var(--bs-body-color);
	text-decoration-color: var(--bs-border-color);
}

.blg-link-leise:hover {
	color: var(--blg-lila-text);
}