INPUT[type="radio"] {
	display: none;
}

/* Ein Satz genuegt, seit Klick und Tipp dasselbe tun -- die Unterscheidung nach
   Zeigergeraet ist mit der Vollbildlupe weggefallen. */
.lupenhinweis {
	font-size: 0.9em;
	font-style: italic;
	margin: 12px 0px 0px 0px;
	opacity: 0.75;
}

.content {
	display: none;
	margin: 12px 0px 0px 0px;
}

/* Der Ausloeser ist ein Knopf und keine Flaeche mit Klickhandler: so oeffnen Klick,
   Enter und Leertaste die Lupe von selbst, und der Fokusrahmen kommt vom Browser.
   Zurueckgesetzt wird nur, was ein Knopf von Haus aus mitbringt. */
.lupenknopf {
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: zoom-in;
}

/* Stand bis zum 2026-08-27 fuenfmal als style-Attribut im Markup. */
.content IMG {
	display: block;
	width: 100%;
}

.content > P {
	text-align: center;
	margin: 6px 0px 9px 0px;
}

/* Die Vollbildlupe, die das Skript dieser Seite an den BODY haengt. Unter showModal()
   steht sie im Top Layer -- ausserhalb jedes overflow: hidden der Seite, und darum geht
   es hier ueberhaupt. Ein ::backdrop braucht sie nicht: sie fuellt den Schirm selbst. */
DIALOG.lupe {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	padding: 0;
	border: none;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.92);
	cursor: grab;
	/* Im Dialog gibt es nichts zu scrollen, das Ziehen gehoert ganz der Lupe. Anders als
	   im Seitenrahmen kostet das hier nichts -- deshalb faellt drinnen auch die
	   Unterscheidung zwischen Maus und Finger weg. */
	touch-action: none;
	overscroll-behavior: contain;
}

DIALOG.lupe:active {
	cursor: grabbing;
}

/* Die Anzeigegroesse setzt das Skript als Stilattribut: Eigengroesse geteilt durch die
   Pixeldichte, damit ein Bildpunkt auf einem Geraetepunkt landet. width: auto gilt also
   nur, bis das Bild vermessen ist. max-width: none muss trotzdem hier stehen -- eine
   Deckelung von aussen zoege die gesetzte Breite wieder zusammen, und dann vergroessert
   die Lupe nichts mehr. Genau daran ist sie in .content einmal gescheitert. */
DIALOG.lupe IMG.lupe__bild {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	max-width: none;
}

/* Optik wie am Schliessknopf der Lightbox, siehe lib/styles.css. */
DIALOG.lupe BUTTON.lupe__zu {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	opacity: 0.8;
}

DIALOG.lupe BUTTON.lupe__zu:hover {
	opacity: 1;
}

DIALOG.lupe BUTTON.lupe__zu SVG {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: #ffffff;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.8));
}

/* Einblende-Regel (#radioJJJJ:checked ~ #contentJJJJ) erzeugt index.html aus $jahrgaenge. */

INPUT[type="radio"]:checked + LABEL {
	font-weight: bold;
	background-color: rgba(100, 221, 23, 0.9);
}

.tabs label {
	background-color: rgba(100, 221, 23, 0.5);
	border: 1px solid rgb(100, 221, 23);
	border-radius: 2px;
	box-shadow:
		rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
		rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
	box-sizing: border-box;
	cursor: pointer;
	padding: 4px 8px 4px 8px;
}