/* Fotos — mobile-first. Am Schiessstand wird das hier mit einer Hand bedient. */

.omvsg-fotos {
	--f-linie: var(--linie, #e3e0d8);
	--f-sand: var(--sand, #f6f4ef);
	--f-akzent: var(--gruen, #005041);
	--f-akzent-dunkel: var(--gruen-dunkel, #003a2f);
	--f-leise: var(--tinte-leise, #5b6663);
	--f-radius: var(--radius, 10px);
}

.omvsg-fotos__leise { color: var(--f-leise); font-size: .9rem; }

.omvsg-fotos__meldung {
	padding: .7rem .9rem;
	margin: 0 0 1.2rem;
	border-radius: 8px;
	background: #e8f3ec;
	border: 1px solid #bcd9c6;
}
.omvsg-fotos__meldung--fehler { background: #fdecea; border-color: #f3c6c1; color: #8a2317; }

.omvsg-fotos__box {
	padding: 1rem 1.1rem;
	border: 1px solid var(--f-linie);
	border-radius: var(--f-radius);
	background: var(--f-sand);
}
.omvsg-fotos__box p { margin: 0; }

/* ------------------------------------------------------------- Upload */

.omvsg-fotos--upload { padding-bottom: 2.5rem; }

.omvsg-fotos__formular {
	display: grid;
	gap: 1rem;
	max-width: 34rem;
	padding: 1.25rem;
	border: 1px solid var(--f-linie);
	border-radius: var(--f-radius);
	background: var(--f-sand);
}

/* Der Honigtopf. aria-hidden am Absatz, display:none am Ganzen — ein
   Formularcrawler liest das Markup, kein CSS. */
.omvsg-fotos__honig { display: none !important; }

.omvsg-fotos__wahl {
	display: grid;
	gap: .4rem;
	font-weight: 600;
	color: var(--f-leise);
}

.omvsg-fotos__formular input[type="file"] {
	padding: .8rem .7rem;
	border: 1px dashed var(--f-linie);
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: max(1rem, 16px);
	width: 100%;
	box-sizing: border-box;
}

.omvsg-fotos__auswahl {
	padding: .5rem .7rem;
	border-radius: 8px;
	background: #fff;
	border: 1px solid var(--f-linie);
	font-size: .92rem;
}
.omvsg-fotos__auswahl.ist-zuviel { background: #fdecea; border-color: #f3c6c1; color: #8a2317; }

.omvsg-fotos__veranstaltung { margin: 0; font-size: 1.05rem; }
.omvsg-fotos__fortschritt { margin: 0; color: var(--f-akzent-dunkel); }
.omvsg-fotos__fortschritt.ist-fehler { color: #8a2317; }
.omvsg-fotos__balken { width: 100%; height: 1rem; accent-color: var(--f-akzent); }

.omvsg-fotos__knopf {
	display: inline-block;
	padding: .8rem 1.5rem;
	border: 0;
	border-radius: 8px;
	background: var(--f-akzent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	font-size: max(1rem, 16px);
	text-decoration: none;
	cursor: pointer;
}
.omvsg-fotos__knopf:hover { background: var(--f-akzent-dunkel); color: #fff; }
.omvsg-fotos__knopf:disabled { opacity: .6; cursor: default; }

/* ------------------------------------------------------------- Freigabe */

.omvsg-fotos__freigabe { display: grid; gap: 1.2rem; }
.omvsg-fotos__freigabe h2 { margin: 0; }

.omvsg-fotos__gitter {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: .7rem;
}

.omvsg-fotos__kachel {
	position: relative;
	display: block;
	border: 2px solid var(--f-linie);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	cursor: pointer;
}
.omvsg-fotos__kachel:has(input:checked) { border-color: var(--f-akzent); }

/* Die Auswahlfläche ist die ganze Kachel — am Handy trifft man kein
   14-Pixel-Kästchen. Das Kästchen selbst bleibt sichtbar und bedienbar. */
.omvsg-fotos__kachel input[type="checkbox"] {
	position: absolute;
	top: .4rem;
	left: .4rem;
	z-index: 2;
	width: 1.4rem;
	height: 1.4rem;
	accent-color: var(--f-akzent);
}

.omvsg-fotos__vorschau { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--f-sand); }
.omvsg-fotos__vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.omvsg-fotos__zuordnung { display: block; padding: .2rem .4rem .5rem; font-size: .82rem; color: var(--f-akzent-dunkel); }

/*
 * Die Lupe: das Bild gross ansehen, bevor man über es entscheidet.
 *
 * Oben rechts, weil das Kästchen oben links sitzt — die beiden dürfen sich
 * nicht überlagern, sonst trifft man am Handy das falsche. Dunkle Scheibe
 * unter dem Zeichen, weil ein Foto darunter jede Farbe haben kann.
 */
.omvsg-fotos__lupe {
	position: absolute;
	top: .4rem;
	right: .4rem;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	text-decoration: none;
}
/* Klicks sollen immer den Verweis treffen, nie das Zeichen darin: Nur dann
   erkennt der Browser interaktiven Inhalt und schaltet das Kästchen der
   umgebenden Beschriftung nicht mit um. */
.omvsg-fotos__lupe svg { width: 1.3rem; height: 1.3rem; pointer-events: none; }
.omvsg-fotos__lupe:hover,
.omvsg-fotos__lupe:focus-visible { background: rgba(0, 0, 0, .8); }
.omvsg-fotos__lupe:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.omvsg-fotos__zeit {
	display: block;
	padding: .35rem .5rem;
	font-size: .78rem;
	color: var(--f-leise);
	font-variant-numeric: tabular-nums;
}
.omvsg-fotos__zeit em { font-style: normal; opacity: .75; }

.omvsg-fotos__fehlt {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	font-size: .85rem;
	color: var(--warnung, #8a5a00);
}

.omvsg-fotos__stapel {
	display: grid;
	gap: .8rem;
	padding: 1rem;
	border: 1px solid var(--f-linie);
	border-radius: var(--f-radius);
	background: var(--f-sand);
	/* Bleibt beim Blättern durch 60 Bilder in Reichweite. */
	position: sticky;
	bottom: 0;
	/*
	 * Über den Kacheln, nicht darunter. Kästchen (Ebene 2) und Lupe (Ebene 3)
	 * sind absolut gesetzt und malten sonst durch die Leiste hindurch — am
	 * Handy standen sie mitten auf dem Knopf „Freigeben", und ein Fingertipp
	 * dort traf das Kästchen der letzten Reihe statt des Knopfes.
	 */
	z-index: 4;
}
.omvsg-fotos__stapel label { display: grid; gap: .3rem; font-weight: 600; color: var(--f-leise); }

.omvsg-fotos__stapel select {
	padding: .6rem .7rem;
	border: 1px solid var(--f-linie);
	border-radius: 8px;
	font: inherit;
	font-size: max(1rem, 16px);
	background: #fff;
	width: 100%;
	box-sizing: border-box;
	font-weight: 400;
	color: inherit;
}

.omvsg-fotos__knopfleiste { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

.omvsg-fotos__verwerfen {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: .9rem;
	color: #8a2317;
	text-decoration: underline;
	cursor: pointer;
}

.omvsg-fotos__aushang { margin-top: 2rem; font-size: .9rem; }
.omvsg-fotos__aushang summary { cursor: pointer; color: var(--f-leise); }
.omvsg-fotos__aushang code { word-break: break-all; font-size: .85rem; }
.omvsg-fotos__aushang form { display: grid; gap: .6rem; margin-top: .6rem; }
.omvsg-fotos__aushang label { display: grid; gap: .35rem; min-width: 0; }
.omvsg-fotos__aushang select { width: 100%; min-width: 0; min-height: 2.75rem; font: inherit; }
.omvsg-fotos__aushang button { min-height: 2.75rem; font: inherit; cursor: pointer; }
.omvsg-fotos__aushang p a { display: block; min-height: 2.75rem; padding: .6rem 0; box-sizing: border-box; overflow-wrap: anywhere; }

/* ------------------------------------------------------- Block am Termin */

.omvsg-fotos--block { margin-top: 2.5rem; }
.omvsg-fotos--block h2 { margin-bottom: .8rem; }

.omvsg-fotos__gitter--anzeige {
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

.omvsg-fotos__bild {
	display: block;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--f-sand);
}
.omvsg-fotos__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.omvsg-fotos__bild:hover img { opacity: .9; }

@media (max-width: 30rem) {
	.omvsg-fotos__gitter { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
}

/* ------------------------------------------------------------- Galerie */

/*
 * Auf der Galerieseite hebt das Theme die Lesebreite auf (`.inhalt--breit`).
 * Die gewonnene Fläche soll in *grössere* Kacheln gehen, nicht in mehr und
 * kleinere: Bei 11rem Mindestbreite entstünden auf 1140px sechs Spalten mit
 * knapp 180 Pixeln — kleiner als vorher, obwohl mehr Platz da ist.
 *
 * 16rem ergibt bei 1140px vier Spalten zu rund 275 Pixeln. Die Kachel misst
 * 480×360, deckt also auch Bildschirme mit doppelter Punktdichte ab.
 *
 * Ausdrücklich erst ab 60rem: Ohne diese Grenze fällt ein Handy mit 375
 * Pixeln auf **eine** Spalte zurück, weil 16rem dort nur einmal hineinpasst.
 * Genau das ist beim ersten Anlauf passiert — die Breite half dem Bildschirm
 * und schadete dem Handy.
 */
@media (min-width: 60rem) {
	.omvsg-fotos--galerie .omvsg-fotos__gitter--anzeige {
		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
		gap: 1rem;
	}

	/*
	 * Dasselbe für die Freigabemaske, aus einem strengeren Grund als
	 * Ansehnlichkeit: Hier wird entschieden, ob ein Bild öffentlich wird.
	 * Ohne diese Regel füllt auto-fill die gewonnene Breite einfach mit mehr
	 * und kleineren Kacheln — 155 Pixel statt 190, das Gegenteil des Ziels.
	 *
	 * 14rem ergeben in der 1104 Pixel breiten Spalte vier Kacheln zu 264
	 * Pixeln — nachgemessen, nicht geschätzt: auto-fill rechnet den Abstand
	 * mit, deshalb sind es vier und nicht die fünf, die 1104/224 nahelegen.
	 */
	.omvsg-fotos__freigabe .omvsg-fotos__gitter {
		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
		gap: 1rem;
	}
}

/* Die Beschriftungen bleiben in Lesebreite — eine Linie über 1140px hinweg
   wirkt wie ein Trennstrich, nicht wie eine Überschrift. */
.omvsg-fotos--galerie .omvsg-fotos__abschnitt-titel,
.omvsg-fotos--galerie .omvsg-fotos__abschnitt > .omvsg-fotos__leise {
	max-width: var(--breite-text, 46rem);
}

.omvsg-fotos__abschnitt { margin-bottom: 2.5rem; }

.omvsg-fotos__abschnitt-titel {
	margin: 0 0 .2rem;
	padding-bottom: .3rem;
	border-bottom: 2px solid var(--f-akzent);
	font-size: 1.3rem;
}
.omvsg-fotos__abschnitt-titel a { text-decoration: none; color: inherit; }
.omvsg-fotos__abschnitt-titel a:hover { color: var(--f-akzent); }
.omvsg-fotos__abschnitt > .omvsg-fotos__leise { margin: 0 0 .8rem; }

.omvsg-fotos__filter { margin: 0 0 1.8rem; }
.omvsg-fotos__filtergruppe { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.omvsg-fotos__filtertitel {
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--f-leise);
	margin-right: .3rem;
}
.omvsg-fotos__chip {
	display: inline-block;
	padding: .32rem .75rem;
	border: 1px solid var(--f-linie);
	border-radius: 999px;
	background: #fff;
	font-size: .9rem;
	text-decoration: none;
	color: inherit;
}
.omvsg-fotos__chip:hover { border-color: var(--f-akzent); color: var(--f-akzent); }
.omvsg-fotos__chip.ist-aktiv { background: var(--f-akzent); border-color: var(--f-akzent); color: #fff; }

.omvsg-fotos__pflege { margin-top: 2rem; }

/* Share-Daten werden nie in das cachebare Galerie-HTML geschrieben. */
.omvsg-fotos__share:not([hidden]) {
	display: grid;
	gap: .65rem;
	max-width: 38rem;
	margin: 1.5rem 0;
	padding: 1rem;
	border: 1px solid var(--f-linie, #e3e0d8);
	border-radius: 10px;
	background: var(--f-sand, #f6f4ef);
}
.omvsg-fotos__share h3, .omvsg-fotos__share p { margin: 0; }
.omvsg-fotos__share input, .omvsg-fotos__share textarea {
	box-sizing: border-box;
	width: 100%;
	padding: .6rem;
	border: 1px solid var(--f-linie, #e3e0d8);
	border-radius: 6px;
	font: inherit;
}
.omvsg-fotos__share button { justify-self: start; padding: .6rem .9rem; cursor: pointer; }
#eingereichte-fotos, [id^="eingereichte-fotos-"] { scroll-margin-top: 5rem; }
.omvsg-fotos__anker { display: block; height: 0; scroll-margin-top: 5rem; }
.omvsg-fotos--bedienung { margin-top: .5rem; }

/* Aktionen liegen auf allen Bildern desselben Avada-Rasters, auch am Handy. */
.omvsg-fotos__aktionskachel { position: relative; }
.omvsg-fotos__bild-melden,
.omvsg-fotos__bild-entfernen {
	position: absolute;
	z-index: 5;
	right: .5rem;
	min-height: 2.75rem;
	padding: .45rem .7rem;
	border: 1px solid #fff;
	border-radius: 6px;
	background: rgba(20, 24, 22, .9);
	color: #fff;
	font-family: inherit;
	font-size: .84rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}
.omvsg-fotos__bild-melden { bottom: .5rem; }
.omvsg-fotos__bild-entfernen { top: .5rem; }
.omvsg-fotos__bild-melden:focus-visible,
.omvsg-fotos__bild-entfernen:focus-visible { outline: 3px solid #f9bd35; outline-offset: 2px; }
@media (hover: hover) {
	.omvsg-fotos__bild-melden,
	.omvsg-fotos__bild-entfernen { opacity: 0; }
	.omvsg-fotos__aktionskachel:hover .omvsg-fotos__bild-melden,
	.omvsg-fotos__aktionskachel:hover .omvsg-fotos__bild-entfernen,
	.omvsg-fotos__aktionskachel:focus-within .omvsg-fotos__bild-melden,
	.omvsg-fotos__aktionskachel:focus-within .omvsg-fotos__bild-entfernen { opacity: 1; }
}

/* ------------------------------------------------------------ Lightbox */

.omvsg-fotos__lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(12, 14, 13, .94);
	color: #fff;
	overflow: hidden;
}
.omvsg-fotos__lightbox::backdrop { background: rgba(12, 14, 13, .94); }

.omvsg-fotos__lb-figur {
	margin: 0;
	height: 100%;
	display: grid;
	/*
	 * minmax(0, 1fr), nicht 1fr: Kurzform `1fr` heisst `minmax(auto, 1fr)`,
	 * und dieses `auto`-Minimum ist die eigene Höhe des Bildes. Die Zeile kann
	 * dann gar nicht kleiner werden als das Bild — `max-height: 100%` unten
	 * misst sich an einer Zeile, die selbst schon zu gross ist, und läuft ins
	 * Leere.
	 *
	 * Nachgemessen an einem hochformatigen Bild: 1068 Pixel Bild auf 900
	 * Pixel Schirm, die Beschriftung stand bei y=1124 und war unerreichbar.
	 * In der Galerie fiel das nie auf, weil dort querformatige Bilder liegen
	 * — bei denen greift `max-width` zuerst und zieht die Höhe mit herunter.
	 */
	grid-template-rows: minmax(0, 1fr) auto;
	place-items: center;
	padding: 3.5rem .5rem 1rem;
	box-sizing: border-box;
}

.omvsg-fotos__lb-bild {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
}

.omvsg-fotos__lb-text {
	padding: .8rem .5rem 0;
	font-size: .88rem;
	color: rgba(255, 255, 255, .75);
	text-align: center;
}

.omvsg-fotos__lb-schliessen,
.omvsg-fotos__lb-blaettern {
	position: absolute;
	z-index: 2;
	border: 0;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	border-radius: 999px;
	/* 44px ist die kleinste Fläche, die sich am Handy zuverlässig trifft. */
	min-width: 2.75rem;
	min-height: 2.75rem;
	font-size: 1.6rem;
	line-height: 1;
	display: grid;
	place-items: center;
}
.omvsg-fotos__lb-schliessen:hover,
.omvsg-fotos__lb-blaettern:hover { background: rgba(255, 255, 255, .24); }

.omvsg-fotos__lb-schliessen { top: .6rem; right: .6rem; }
.omvsg-fotos__lb-blaettern { top: 50%; transform: translateY(-50%); }
.omvsg-fotos__lb-zurueck { left: .6rem; }
.omvsg-fotos__lb-weiter { right: .6rem; }
.omvsg-fotos__lb-blaettern[hidden] { display: none; }

/* -------------------------------------------------------------- Melden */

.omvsg-fotos__melden { margin-top: 1.2rem; font-size: .92rem; }
.omvsg-fotos__melden summary { cursor: pointer; color: var(--f-leise); }
.omvsg-fotos__melden form {
	display: grid;
	gap: .7rem;
	max-width: 30rem;
	margin-top: .8rem;
	padding: 1rem;
	border: 1px solid var(--f-linie);
	border-radius: var(--f-radius);
	background: var(--f-sand);
}
.omvsg-fotos__melden label { display: grid; gap: .25rem; font-weight: 600; color: var(--f-leise); }
.omvsg-fotos__melden input[type="url"],
.omvsg-fotos__melden textarea {
	padding: .55rem .7rem;
	border: 1px solid var(--f-linie);
	border-radius: 8px;
	font: inherit;
	font-size: max(1rem, 16px);
	font-weight: 400;
	color: inherit;
	background: #fff;
	width: 100%;
	box-sizing: border-box;
}

/* Gemeldete Bilder in der Freigabe */

.omvsg-fotos__gemeldet {
	padding: 1rem;
	border: 2px solid #f3c6c1;
	border-radius: var(--f-radius);
	background: #fdf6f5;
	margin-bottom: 2rem;
}
.omvsg-fotos__gemeldet h2 { color: #8a2317; }
.omvsg-fotos__kachel.ist-gemeldet { border-color: #d98b80; }

.omvsg-fotos__meldevermerk {
	display: block;
	padding: 0 .5rem .45rem;
	font-size: .76rem;
	color: #8a2317;
}
.omvsg-fotos__meldegrund {
	display: block;
	margin-top: .2rem;
	font-style: italic;
	color: var(--f-leise);
	overflow-wrap: anywhere;
}
.omvsg-fotos__altmeldung {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: .8rem 0;
}
.omvsg-fotos__altmeldung img { width: 5rem; height: 5rem; object-fit: cover; }
.omvsg-fotos__altmeldung input { min-width: 2.75rem; min-height: 2.75rem; }

/*
 * Tippflächen auf Geräten ohne Mauszeiger (#35).
 *
 * Gemessen waren die Jahresfilter 36 px, die Lupe 40 px, das
 * Auswahlkästchen 22 px und die Zeilen „Ein Bild soll hier nicht stehen?"
 * bzw. „Verwerfen" gut 21 px hoch. 44 px (2.75rem) in beide Richtungen,
 * ausschliesslich in dieser Abfrage — mit Maus bleibt alles, wie es war.
 */
@media (hover: none) {
	.omvsg-fotos__filtergruppe { gap: .5rem; }

	/* Bricht um (flex-wrap oben), scrollt nicht. */
	.omvsg-fotos__chip {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		box-sizing: border-box;
		padding: .5rem .85rem;
	}

	/*
	 * summary bleibt list-item: display: flex nähme dem Element in Chrome das
	 * Dreieck, und ohne das sieht ein Aufklapper nicht mehr danach aus.
	 * Deshalb Höhe über min-height und Polsterung statt über Ausrichtung.
	 */
	.omvsg-fotos__melden summary,
	.omvsg-fotos__aushang summary {
		min-height: 2.75rem;
		box-sizing: border-box;
		padding: .65rem 0;
	}

	/*
	 * Der Abschnittstitel ist ein Verweis auf den Termin. Am Handy bricht er
	 * über zwei Zeilen und ist damit hoch genug; auf einem Tablet steht er in
	 * einer Zeile und mass 24 px. display: block statt inline-flex — eine
	 * inline-flex-Box wäre so breit wie der Text und liefe bei langen Titeln
	 * seitlich aus der Spalte.
	 */
	.omvsg-fotos__abschnitt-titel a {
		display: block;
		min-height: 2.75rem;
		box-sizing: border-box;
		padding: .6rem 0;
	}

	.omvsg-fotos__verwerfen {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		min-width: 2.75rem;
		box-sizing: border-box;
		padding: 0 .5rem;
	}

	.omvsg-fotos__knopf {
		min-height: 2.75rem;
		box-sizing: border-box;
	}

	/*
	 * Das Auswahlkästchen in der Freigabe. Die ganze Kachel schaltet es
	 * ohnehin mit um; wer aber das Kästchen selbst treffen will, soll es
	 * treffen. Es sitzt oben links, die Lupe oben rechts. Nachgemessen auf der
	 * schmalsten Kachel (7.5rem, also 120 px bei 320 px Fensterbreite): zwischen
	 * den beiden 44-px-Flächen bleiben 11,6 px — sie überlagern sich nicht. Der
	 * Browsertest misst das bei jeder Breite nach.
	 */
	.omvsg-fotos__kachel input[type="checkbox"] {
		width: 2.75rem;
		height: 2.75rem;
	}

	.omvsg-fotos__lupe {
		width: 2.75rem;
		height: 2.75rem;
	}

	/* Formularfelder auf denselben Massstab wie die Knöpfe. */
	.omvsg-fotos__formular input[type="file"],
	.omvsg-fotos__stapel select,
	.omvsg-fotos__melden input[type="url"],
	.omvsg-fotos__melden textarea {
		min-height: 2.75rem;
	}
}