/* Nuovo indice (Sessione 15, docs/sito/13-INDICE-NUOVO.md).
   Colori da menu/farben.css. Misure in px: Bootstrap 3 (caricato da include.php) mette html a 10px. */

.iv,
.iv * {
	box-sizing: border-box;
}

/* Colori dell'intestazione: neutri nell'indice generale; nella pagina di una rubrica
   li danno le classi kopf-<rubrica> di menu/kopf.css (:where non pesa, quindi vincono loro) */
:where(.iv) {
	--k-hell: #f4f6f8;
	--k-rand: #cfd6dd;
	--k-dunkel: #26323d;
	--k-streifen: #ff9f1c;
}
.iv {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px 32px;
	color: #222;
	font-size: 16px;
	line-height: 1.45;
}

/* Colori di ogni rubrica: chiaro, bordo, scuro (testo AAA), striscia */
.iv-r-news           { --r-hell: var(--news-kopf-hell);         --r-rand: var(--news-kopf-rand);         --r-dunkel: var(--news-kopf-dunkel);         --r-streifen: var(--news-back-1); --r-voll: var(--news-back-1); --r-voll-text: var(--news-text-1); }
.iv-r-kritiker       { --r-hell: var(--kri-kopf-hell);          --r-rand: var(--kri-kopf-rand);          --r-dunkel: var(--kri-kopf-dunkel);          --r-streifen: var(--kri-back-1); --r-voll: var(--kri-back-1); --r-voll-text: var(--kri-text-1); }
.iv-r-promoter       { --r-hell: var(--pro-kopf-hell);          --r-rand: var(--pro-kopf-rand);          --r-dunkel: var(--pro-kopf-dunkel);          --r-streifen: var(--pro-back-1); --r-voll: var(--pro-back-1); --r-voll-text: var(--pro-text-1); }
.iv-r-kochstudio     { --r-hell: var(--koch-kopf-hell);         --r-rand: var(--koch-kopf-rand);         --r-dunkel: var(--koch-kopf-dunkel);         --r-streifen: var(--koch-back-1); --r-voll: var(--koch-back-1); --r-voll-text: var(--koch-text-1); }
.iv-r-wetter         { --r-hell: var(--wetter-kopf-hell);       --r-rand: var(--wetter-kopf-rand);       --r-dunkel: var(--wetter-kopf-dunkel);       --r-streifen: var(--wetter-back-1); --r-voll: var(--wetter-back-1); --r-voll-text: var(--wetter-text-1); }
.iv-r-gartenecke     { --r-hell: var(--garten-kopf-hell);       --r-rand: var(--garten-kopf-rand);       --r-dunkel: var(--garten-kopf-dunkel);       --r-streifen: var(--garten-back-1); --r-voll: var(--garten-back-1); --r-voll-text: var(--garten-text-1); }
.iv-r-pilze          { --r-hell: var(--pilze-kopf-hell);        --r-rand: var(--pilze-kopf-rand);        --r-dunkel: var(--pilze-kopf-dunkel);        --r-streifen: var(--pilze-back-1); --r-voll: var(--pilze-back-1); --r-voll-text: var(--pilze-text-1); }
.iv-r-umweltminister { --r-hell: var(--umwelt-kopf-hell);       --r-rand: var(--umwelt-kopf-rand);       --r-dunkel: var(--umwelt-kopf-dunkel);       --r-streifen: var(--umwelt-back-1); --r-voll: var(--umwelt-back-1); --r-voll-text: var(--umwelt-text-1); }
.iv-r-insekten       { --r-hell: var(--insekten-kopf-hell);     --r-rand: var(--insekten-kopf-rand);     --r-dunkel: var(--insekten-kopf-dunkel);     --r-streifen: var(--insekten-back-1); --r-voll: var(--insekten-back-1); --r-voll-text: var(--insekten-text-1); }
.iv-r-ornithologie   { --r-hell: var(--ornithologie-kopf-hell); --r-rand: var(--ornithologie-kopf-rand); --r-dunkel: var(--ornithologie-kopf-dunkel); --r-streifen: var(--ornithologie-back-1); --r-voll: var(--ornithologie-back-1); --r-voll-text: var(--ornithologie-text-1); }

.iv a {
	color: var(--k-dunkel);
}
.iv a:focus-visible,
.iv button:focus-visible,
.iv select:focus-visible,
.iv input:focus-visible {
	outline: 3px solid #1a5fb4;
	outline-offset: 2px;
}

.iv-entwickler {
	margin: 12px 0 0;
	text-align: center;
	font-size: 14px;
}

/* --- Intestazione --- */
.iv-kopf {
	margin: 16px 0;
	padding: 18px 22px;
	background: var(--k-hell);
	border: 1px solid var(--k-rand);
	border-top: 8px solid var(--k-streifen);
	border-radius: 16px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .10);
	text-align: center;
}
/* Pagina di una rubrica: foto tonda della legenda accanto al titolo */
.iv-kopf:has(.iv-kopfbild) {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
}
.iv-kopfbild {
	flex: none;
	width: 120px;
	height: 120px;
	object-fit: cover;
	border: 4px solid var(--k-streifen);
	border-radius: 50%;
	background: #fff;
}
.iv-kopf h1 {
	margin: 0 0 8px;
	font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--k-dunkel);
}
.iv-kopf h1 span {
	font-weight: 600;
	font-size: 22px;
}
.iv-kopf p {
	max-width: 760px;
	margin: 6px auto 0;
	font-size: 16px;
}

/* --- Pulsanti delle rubriche --- */
.iv-rubriken ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}
.iv-rubriken a {
	display: inline-block;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--r-rand, #cfd6dd);
	border-top: 4px solid var(--r-streifen, #ff9f1c);
	border-radius: 10px;
	background: var(--r-hell, #fff);
	color: var(--r-dunkel, #26323d) !important;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}
.iv-rubriken a:hover {
	text-decoration: underline;
}
.iv-rubriken a[aria-current="page"] {
	background: var(--r-dunkel, #26323d);
	border-color: var(--r-dunkel, #26323d);
	color: #fff !important;
}

/* --- Filtri --- */
.iv-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px 16px;
	margin: 0 0 20px;
	padding: 16px;
	background: #fff;
	border: 1px solid #d5dbe1;
	border-radius: 12px;
}
.iv-feld {
	display: flex;
	flex-direction: column;
	flex: 1 1 150px;
	min-width: 0;
}
.iv-feld-suche {
	flex: 2 1 260px;
}
.iv-feld label {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
}
.iv-feld input,
.iv-feld select {
	width: 100%;
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid #8a959f;
	border-radius: 8px;
	background: #fff;
	color: #222;
	font-size: 16px;	/* sotto i 16px iOS ingrandisce la pagina */
}
.iv-knoepfe {
	display: flex;
	align-items: center;
	gap: 14px;
}
.iv-knoepfe button {
	min-height: 44px;
	padding: 8px 20px;
	border: 2px solid #3d1a00;
	border-radius: 10px;
	background: #ff9f1c;
	color: #3d1a00;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}
.iv-knoepfe a {
	font-size: 15px;
}

/* --- Risultati --- */
.iv-anzahl {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 700;
}
.iv-leer {
	padding: 20px;
	text-align: center;
	font-size: 17px;
}
.iv-sprung {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
}
.iv-sprung a {
	display: inline-block;
	min-width: 44px;
	min-height: 44px;
	padding: 10px 10px;
	border: 1px solid #cfd6dd;
	border-radius: 8px;
	background: #fff;
	text-align: center;
	font-weight: 600;
	text-decoration: none;
}
.iv-sprung a:hover {
	text-decoration: underline;
}
.iv-sprung a[hidden] {
	display: none;
}
.iv-sprung-box {
	margin: 0 0 16px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid #cfd6dd;
	border-radius: 12px;
}
.iv-sprung-box summary {
	min-height: 44px;
	padding: 10px 0;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
}
.iv-sprung-box[open] summary {
	margin-bottom: 4px;
}
.iv-sprung-suche {
	max-width: 360px;
	margin: 0 0 12px;
}
.iv-sprung-box .iv-sprung {
	max-height: 320px;
	overflow-y: auto;
	padding: 2px;
}
.iv-sprung-leer {
	margin: 0 0 12px;
}
.iv-gruppe {
	margin: 0 0 28px;
	scroll-margin-top: 70px;
}
.iv-gruppentitel {
	margin: 0 0 12px;
	padding: 0 0 4px;
	border-bottom: 3px solid var(--k-streifen);
	font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 26px;
	font-weight: 700;
	color: var(--k-dunkel);
}
.iv-untertitel {
	margin: 18px 0 10px;
	font-size: 20px;
	font-weight: 600;
}

/* --- Schede --- */
.iv-karten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.iv-karte {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 6px;
	background: var(--r-hell);	/* cornice: fondo chiaro della rubrica attorno a foto e testo (variante B) */
	border: 2px solid var(--r-rand);
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .10);
	transition: transform .22s cubic-bezier(.2, .8, .3, 1.2), box-shadow .22s ease;
}
/* Al passaggio del mouse la scheda si alza un poco, come una carta scelta */
@media (hover: hover) {
	.iv-karte:hover,
	.iv-karte:focus-within {
		transform: translateY(-6px) scale(1.02);
		box-shadow: 0 16px 30px rgba(0, 0, 0, .30), 0 4px 8px rgba(0, 0, 0, .15);
	}
}
@media (prefers-reduced-motion: reduce) {
	.iv-karte {
		transition: none;
	}
	.iv-karte:hover,
	.iv-karte:focus-within {
		transform: none;
	}
}
/* Nome della rubrica sopra la foto, nel colore pieno della rubrica */
.iv-streifen {
	display: block;
	margin: -6px -6px 6px;
	padding: 3px 10px;
	background: var(--r-voll);
	color: var(--r-voll-text);
	font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}
.iv-karte p {
	margin: 0 12px 8px;
	font-size: 14px;
}
.iv-link {
	position: relative;
	display: block;
	color: #222 !important;
	text-decoration: none;
}
/* Bootstrap 3 (include.php) sottolinea ogni a:hover e a:focus: sulle schede niente sottolineatura (Michele) */
.iv .iv-link:hover,
.iv .iv-link:focus {
	text-decoration: none;
}
.iv-link img,
.iv-ohnebild {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: #fff;
	border: 2px solid var(--r-rand);
	border-radius: 8px;
}
/* Stelle date dall'utente (come la stellina del vecchio indice), nell'angolo della foto */
.iv-sterne {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 2px 9px;
	background: #fff;
	color: #222;
	border: 2px solid #e0a800;
	border-radius: 999px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
	font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}
.iv-sterne span[aria-hidden] {
	white-space: nowrap;
}
.iv-sterne b {
	color: #d99a00;
}
.iv-stern {
	display: inline-block;
	vertical-align: -2px;
	fill: #d99a00;
}
.iv-ohnebild {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--r-dunkel);
	font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 22px;
	font-weight: 700;
}
.iv-titel {
	display: block;
	margin: 10px 12px 6px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}
.iv-karte .iv-latein {
	font-style: italic;
}
.iv-meta {
	color: #333;
}

/* --- Vista per data: ogni mese col suo colore, legato alla stagione (Sessione 15; prima quelli di inhalts_new.css) --- */
.iv-monat {
	--m-farbe: #e8ecf0;
	--m-rand: #8a959f;
	margin: 0 0 24px;
	padding: 4px 16px 16px;
	background: #f6f7f8;
	background: color-mix(in srgb, var(--m-farbe) 14%, #fff);
	border: 3px solid var(--m-farbe);
	border-radius: 16px;
}
.iv-m-1  { --m-farbe: #8cc4ee; --m-rand: #2f6d9e; }	/* Januar: Eis */
.iv-m-2  { --m-farbe: #9fb4c7; --m-rand: #4a6378; }	/* Februar: Winterhimmel */
.iv-m-3  { --m-farbe: #b6e388; --m-rand: #5a8a2c; }	/* März: erstes Grün */
.iv-m-4  { --m-farbe: #f6a9c8; --m-rand: #a8457a; }	/* April: Blüten, Ostern */
.iv-m-5  { --m-farbe: #5fc47a; --m-rand: #2e7a3a; }	/* Mai: Wiese */
.iv-m-6  { --m-farbe: #ffd93b; --m-rand: #8f7400; }	/* Juni: Sonne */
.iv-m-7  { --m-farbe: #4fc3e8; --m-rand: #1d6f8a; }	/* Juli: Meer */
.iv-m-8  { --m-farbe: #ffb347; --m-rand: #a0600f; }	/* August: Sommerhitze */
.iv-m-9  { --m-farbe: #a77bc9; --m-rand: #5c3a7a; }	/* September: Trauben */
.iv-m-10 { --m-farbe: #ff8a2a; --m-rand: #8a4410; }	/* Oktober: Kürbis */
.iv-m-11 { --m-farbe: #a98a6d; --m-rand: #5e4630; }	/* November: Laub und Nebel */
.iv-m-12 { --m-farbe: #d94848; --m-rand: #7a1f1f; }	/* Dezember: Weihnachten */
.iv-monatsname,
.iv-wochenname {
	margin: 14px 0 12px;
	text-align: center;
	font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	color: #222;
}
.iv-monatsname span,
.iv-wochenname span {
	display: inline-block;
	padding: 6px 24px;
	background: var(--m-farbe);
	border: 2px solid var(--m-rand);
	border-radius: 999px;
}
.iv-wochenname span {
	background: #fff;
	border-width: 1px;
}
.iv-monatsname {
	font-size: 28px;
}
.iv-wochenname {
	font-size: 18px;
}
.iv-wochenname span {
	padding: 3px 16px;
}
.iv-kat a,
.iv-namen a {
	color: var(--r-dunkel);
}
.iv-musik {
	color: #444;
	font-weight: 600;
}
.iv-bearbeiten {
	padding-top: 6px;
	border-top: 1px dashed #ccc;
}
.iv-hinweis {
	padding: 0 6px;
	border-radius: 4px;
	background: #fff3c4;
	font-size: 12px;
}

.iv-weiter {
	margin: 8px 0 24px;
	text-align: center;
}
.iv-weiter-knopf {
	display: inline-block;
	min-height: 44px;
	padding: 10px 24px;
	border: 2px solid #3d1a00;
	border-radius: 10px;
	background: #ff9f1c;
	color: #3d1a00 !important;
	font-weight: 700;
	text-decoration: none !important;
}
.iv-weiter-knopf[hidden] {
	display: none;
}
.iv-weiter-knopf:hover {
	background: #ffb54d;
}
/* Barra di caricamento: una striscia che scorre */
.iv-laden {
	max-width: 420px;
	margin: 0 auto;
}
.iv-ladebalken {
	position: relative;
	display: block;
	height: 8px;
	overflow: hidden;
	background: #e3e7eb;
	border-radius: 999px;
}
.iv-ladebalken::after {
	content: "";
	position: absolute;
	top: 0;
	left: -40%;
	width: 40%;
	height: 100%;
	background: #ff9f1c;
	border-radius: 999px;
	animation: iv-laden 1.1s ease-in-out infinite;
}
@keyframes iv-laden {
	to { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.iv-ladebalken::after {
		left: 0;
		width: 100%;
		animation: none;
	}
}
.iv-ladetext {
	display: block;
	margin-top: 8px;
	font-weight: 600;
}

/* --- Telefono --- */
@media only screen and (max-width: 600px) {
	.iv {
		padding: 0 12px 24px;
	}
	.iv-kopf {
		padding: 14px;
	}
	.iv-kopf h1 {
		font-size: 24px;
	}
	.iv-kopf h1 span {
		display: block;
		font-size: 18px;
	}
	.iv-rubriken a {
		padding: 10px 12px;
		font-size: 14px;
	}
	.iv-filter {
		padding: 12px;
	}
	.iv-feld {
		flex: 1 1 130px;
	}
	/* Telefono: una scheda per riga, prima il titolo, poi la foto, poi il resto */
	.iv-karten {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.iv-link {
		display: flex;
		flex-direction: column;
	}
	.iv-titel {
		order: -1;
		margin: 10px 12px 8px;
		font-size: 18px;
	}
	.iv-kopfbild {
		width: 84px;
		height: 84px;
	}
	.iv-kopf:has(.iv-kopfbild) {
		gap: 14px;
	}
	.iv-gruppentitel {
		font-size: 22px;
	}
	.iv-monat {
		padding: 2px 8px 10px;
	}
	.iv-monatsname {
		font-size: 22px;
	}
}

/* --- Browser vecchi (Sessione 26): il PC dei genitori ha Windows XP, quindi al massimo Chrome 49 o Firefox 52 ---
   Chrome 49 non conosce la CSS Grid: senza queste regole ogni scheda prende tutta la larghezza.
   Nei browser di oggi queste regole non valgono. */
@supports not (display: grid) {
	.iv-karten {
		display: flex;
		flex-wrap: wrap;
		margin-right: -16px;
	}
	.iv-karte {
		width: calc(25% - 16px);
		margin: 0 16px 16px 0;
	}
}
@media (max-width: 900px) {
	@supports not (display: grid) {
		.iv-karte { width: calc(33.333% - 16px); }
	}
}
@media (max-width: 700px) {
	@supports not (display: grid) {
		.iv-karte { width: calc(50% - 16px); }
	}
}
/* Senza aspect-ratio (Chrome prima dell'88) e senza gap nei flex (prima dell'84): stessi spazi con i margini */
@supports not (aspect-ratio: 1 / 1) {
	.iv-ohnebild {
		min-height: 160px;
	}
	.iv-rubriken li {
		margin: 0 8px 8px 0;
	}
	.iv-filter > * {
		margin: 0 16px 12px 0;
	}
	.iv-knoepfe > * {
		margin-right: 14px;
	}
	.iv-sprung > * {
		margin: 0 6px 6px 0;
	}
	.iv-kopf > * + * {
		margin-left: 22px;
	}
}

/* --- Link al Who is Who quando si filtra per peluche (Sessione 32) --- */
.iv-who { margin: 0 0 14px; }
.iv-who a {
	display: inline-block;
	padding: 4px 16px 4px 4px;
	border: 2px solid #8e2a9e;
	border-radius: 999px;
	background: #fff;
	color: #561460;
	font-weight: 700;
	text-decoration: none;
}
.iv-who img { width: 48px; height: 36px; margin-right: 10px; border-radius: 999px; vertical-align: middle; }
.iv-who a:hover, .iv-who a:focus { background: #f6e8f8; }

/* --- Vista "Kleine Bilder" (Sessione 29): tutto più piccolo, molte schede per riga, come il vecchio indice ---
   Classe iv-klein su <main>, scelta con i link "Ansicht" (cookie iv_ansicht). Riserve per Chrome 49 in fondo. */
.iv-ansicht {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 600;
}
.iv-ansicht a {
	display: inline-block;
	margin: 0 0 6px 8px;
	padding: 5px 14px;
	border: 2px solid #8a959f;
	border-radius: 999px;
	background: #fff;
	color: #222;
	text-decoration: none;
}
.iv-ansicht a[aria-current] {
	border-color: #2a5f2f;
	background: #2a5f2f;
	color: #fff;
}
.iv-klein .iv-karten {
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 8px;
}
.iv-klein .iv-karte {
	padding: 3px;
	border-width: 1px;
	border-radius: 8px;
}
@media (hover: hover) {
	.iv-klein .iv-karte:hover,
	.iv-klein .iv-karte:focus-within {
		transform: scale(1.04);
	}
}
.iv-klein .iv-streifen {
	margin: -3px -3px 3px;
	padding: 1px 4px;
	font-size: 11px;
}
.iv-klein .iv-link img,
.iv-klein .iv-ohnebild {
	border-width: 1px;
	border-radius: 5px;
}
.iv-klein .iv-ohnebild {
	font-size: 14px;
}
.iv-klein .iv-titel {
	margin: 4px 4px 2px;
	font-size: 13px;
	line-height: 1.25;
}
.iv-klein .iv-karte p {
	margin: 0 4px 3px;
	font-size: 11px;
	line-height: 1.3;
}
.iv-klein .iv-sterne {
	top: 4px;
	right: 4px;
	padding: 0 5px;
	border-width: 1px;
	font-size: 11px;
}
.iv-klein .iv-stern {
	width: 11px;
	height: 11px;
}
@media only screen and (max-width: 600px) {
	.iv-klein .iv-karten {
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
		gap: 6px;
	}
	.iv-klein .iv-titel {
		order: 0;
		margin: 4px 4px 2px;
		font-size: 12px;
	}
}
@supports not (display: grid) {
	.iv-klein .iv-karten { margin-right: -8px; }
	.iv-klein .iv-karte { width: calc(12.5% - 8px); margin: 0 8px 8px 0; }
}
@media (max-width: 1100px) {
	@supports not (display: grid) {
		.iv-klein .iv-karte { width: calc(16.666% - 8px); }
	}
}
@media (max-width: 700px) {
	@supports not (display: grid) {
		.iv-klein .iv-karte { width: calc(33.333% - 8px); }
	}
}
@supports not (aspect-ratio: 1 / 1) {
	.iv-klein .iv-ohnebild { min-height: 70px; }
}

/* Giorno di uscita nel nastro della rubrica (Sessione 29) */
.iv-tag {
	font-weight: 400;
}
.iv-ansicht-teil {
	display: inline-block;
	margin-left: 18px;
}