/* Intestazione delle legende delle rubriche, stile "carta chiara" (proposta A, Sessione 13).
   Un solo stile per tutte le rubriche: ogni Legende-*.php mette <div class="kopf kopf-<rubrica>">
   e qui sotto la classe sceglie i colori di menu/farben.css.
   Montserrat 400/600/700 (anche corsivo) arriva da menu/schrift.css, caricato da include.php (Sessione 37). */

.kopf-news         { --k-hell: var(--news-kopf-hell);         --k-rand: var(--news-kopf-rand);         --k-dunkel: var(--news-kopf-dunkel);         --k-streifen: var(--news-back-1); }
.kopf-kritiker     { --k-hell: var(--kri-kopf-hell);          --k-rand: var(--kri-kopf-rand);          --k-dunkel: var(--kri-kopf-dunkel);          --k-streifen: var(--kri-back-1); }
.kopf-promoter     { --k-hell: var(--pro-kopf-hell);          --k-rand: var(--pro-kopf-rand);          --k-dunkel: var(--pro-kopf-dunkel);          --k-streifen: var(--pro-back-1); }
.kopf-umwelt       { --k-hell: var(--umwelt-kopf-hell);       --k-rand: var(--umwelt-kopf-rand);       --k-dunkel: var(--umwelt-kopf-dunkel);       --k-streifen: var(--umwelt-back-1); }
.kopf-garten       { --k-hell: var(--garten-kopf-hell);       --k-rand: var(--garten-kopf-rand);       --k-dunkel: var(--garten-kopf-dunkel);       --k-streifen: var(--garten-back-1); }
.kopf-koch         { --k-hell: var(--koch-kopf-hell);         --k-rand: var(--koch-kopf-rand);         --k-dunkel: var(--koch-kopf-dunkel);         --k-streifen: var(--koch-back-1); }
.kopf-pilze        { --k-hell: var(--pilze-kopf-hell);        --k-rand: var(--pilze-kopf-rand);        --k-dunkel: var(--pilze-kopf-dunkel);        --k-streifen: var(--pilze-back-1); }
.kopf-insekten     { --k-hell: var(--insekten-kopf-hell);     --k-rand: var(--insekten-kopf-rand);     --k-dunkel: var(--insekten-kopf-dunkel);     --k-streifen: var(--insekten-back-1); }
.kopf-ornithologie { --k-hell: var(--ornithologie-kopf-hell); --k-rand: var(--ornithologie-kopf-rand); --k-dunkel: var(--ornithologie-kopf-dunkel); --k-streifen: var(--ornithologie-back-1); }
.kopf-wetter       { --k-hell: var(--wetter-kopf-hell);       --k-rand: var(--wetter-kopf-rand);       --k-dunkel: var(--wetter-kopf-dunkel);       --k-streifen: var(--wetter-back-1); }

/* !important: wetter.css ha "* { -webkit-box-sizing: unset !important; }", che in Chrome vale anche per box-sizing */
.kopf,
.kopf * {
	box-sizing: border-box !important;
}

.kopf {
	display: flex;
	gap: 16px;
	align-items: stretch;
	width: 100%;
	max-width: 1000px;
	margin: 16px auto 8px;
	padding: 0 12px;
	text-align: center;
	clear: both;
}

/* Il riquadro: fondo chiaro, striscia del colore della rubrica in alto */
.kopf-karte {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	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);
	color: #222;
}
.kopf-inhalt {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.kopf .kopf-titel {
	margin: 0;
	font-family: inherit;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--k-dunkel);
}
.kopf-unter {
	font-size: 18px;
	font-style: italic;
	color: var(--k-dunkel);
}
.kopf-text {
	max-width: 60ch;
	font-size: 17px;
	line-height: 1.5;
	text-align: left;
}
.kopf-motto {
	white-space: pre-line;	/* la rima di Ottilio va a capo come nel file */
	font-size: 18px;
	font-style: italic;
	line-height: 1.4;
	color: var(--k-dunkel);
}

/* Foto del peluche: rettangolo arrotondato, oppure tonda con .rund */
.kopf-bild {
	flex: 0 0 auto;
}
.kopf-bild img {
	display: block;
	width: 220px;
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}
.kopf-bild.rund img {
	width: 130px;
	height: 130px;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid var(--k-streifen);
}

/* Pulsante (pagina "sortiert") e indirizzo email */
.kopf a.kopf-knopf:link,
.kopf a.kopf-knopf:visited {
	display: inline-block;
	margin-top: 4px;
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--k-dunkel);
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}
.kopf a.kopf-knopf:hover,
.kopf a.kopf-knopf:focus {
	background: #000;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.kopf a.kopf-mail:link,
.kopf a.kopf-mail:visited {
	color: var(--k-dunkel);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.kopf a:focus-visible {
	outline: 3px solid #000;
	outline-offset: 3px;
}

/* Riquadro laterale (Gartenecke: "Gugel präsentiert pilze") */
.kopf a.kopf-seite:link,
.kopf a.kopf-seite:visited {
	flex: 0 0 180px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px;
	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);
	color: var(--k-dunkel);
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
}
.kopf-seite img {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid var(--k-streifen);
}
.kopf a.kopf-seite:hover span,
.kopf a.kopf-seite:focus span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Telefono e tablet stretto: tutto in colonna */
@media only screen and (max-width: 700px) {
	.kopf {
		flex-direction: column;
		gap: 12px;
		margin-top: 10px;
	}
	.kopf-karte {
		flex-direction: column;
		gap: 12px;
		padding: 16px 14px;
	}
	.kopf .kopf-titel {
		font-size: 22px;
	}
	.kopf-unter,
	.kopf-text,
	.kopf-motto,
	.kopf a.kopf-knopf:link,
	.kopf a.kopf-knopf:visited {
		font-size: 16px;
	}
	.kopf-bild.rund img {
		width: 100px;
		height: 100px;
	}
	.kopf a.kopf-seite:link,
	.kopf a.kopf-seite:visited {
		flex: none;
		flex-direction: row;
		padding: 8px 12px;
	}
	.kopf-seite img {
		width: 56px;
		height: 56px;
	}
}

@media only screen and (min-width: 1400px) {
	.kopf .kopf-titel {
		font-size: 32px;
	}
}

/* Anni e mesi in una sezione apribile (Sessione 13, scelta R: colori della rubrica).
   Il markup lo scrive menu/monatealle.php: <details class="archiv kopf-<rubrica>">.
   I pulsanti restano gli <input> di prima: qui si tolgono i vecchi gradienti di menu/legende.css. */
.archiv,
.archiv * {
	box-sizing: border-box !important;
}
.archiv {
	width: 100%;
	max-width: 1000px;
	margin: 4px auto 16px;
	padding: 0 12px;
	clear: both;
	text-align: center;
}
.archiv summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: 420px;
	margin: 0 auto;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--k-hell);
	border: 1px solid var(--k-rand);
	color: var(--k-dunkel);
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
}
.archiv summary::-webkit-details-marker {
	display: none;
}
.archiv summary::before {
	content: "\25B8";	/* triangolo: gira quando la sezione e' aperta */
	font-size: 14px;
	transition: transform .2s;
}
.archiv[open] summary::before {
	transform: rotate(90deg);
}
.archiv summary:hover {
	background: #fff;
	border-color: var(--k-dunkel);
}
.archiv summary:focus-visible {
	outline: 3px solid #000;
	outline-offset: 3px;
}
.archiv-jahre {
	font-weight: 400;
}
.archiv #Legende {
	float: none;
	width: auto;
	margin-top: 12px;
	background: transparent;
}
.archiv .Titellegende {
	display: none;	/* "Jahr" e "Monat": i pulsanti si spiegano da soli */
}
.archiv #SHOW {
	margin-top: 6px;
}
.archiv input.jahr,
.archiv input.Monate {
	-webkit-appearance: none;
	appearance: none;
	margin: 4px !important;
	padding: 6px 14px !important;
	border: 1px solid var(--k-rand) !important;
	border-radius: 999px !important;
	background: var(--k-hell) !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	color: var(--k-dunkel) !important;
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
}
.archiv input.jahr {
	width: auto !important;
	font-size: 18px !important;
}
.archiv input.Monate {
	width: auto !important;		/* larghezza del testo, ma almeno 170px: "September 2026" ci sta (P14) */
	min-width: 170px;
	font-size: 16px !important;
}
.archiv input.jahr:hover,
.archiv input.Monate:hover {
	background: #fff !important;
	border-color: var(--k-dunkel) !important;
}
.archiv input.jahrselected,
.archiv input.Aktual,
.archiv input.Aktual:hover {
	background: var(--k-dunkel) !important;
	border-color: var(--k-dunkel) !important;
	color: #fff !important;
}
.archiv input.Aktual {
	cursor: default;
}
.archiv input.Aktualjahr:not(.jahrselected) {
	border: 2px solid var(--k-dunkel) !important;
}
.archiv input:focus-visible {
	outline: 3px solid #000 !important;
	outline-offset: 2px;
}
@media only screen and (max-width: 700px) {
	.archiv input.jahr {
		min-width: 28%;
	}
	/* mesi in due colonne uguali (P14): prima a 320px finivano un po' su due e un po' su una */
	.archiv #SHOW .Leg {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 6px;
	}
	.archiv #SHOW .Leg a {
		display: block;
	}
	.archiv input.Monate {
		width: 100% !important;
		min-width: 0;
		margin: 0 !important;
		padding: 6px 4px !important;
		font-size: 15px !important;
	}
	.archiv #SHOW .Leg a:has(input[style*="250px"]) {
		grid-column: 1 / -1;	/* "September - Dezember 2014" su tutta la riga */
	}
	.archiv summary {
		flex-wrap: wrap;
		gap: 2px 10px;
		font-size: 16px;
	}
	.archiv-titel,
	.archiv-jahre {
		white-space: nowrap;
	}
}

@media only screen and (max-width: 360px) {
	.archiv input.Monate {
		font-size: 14px !important;
	}
}

/* Pulsanti "Geh zum..." in fondo alle pagine (Sessione 14): stesso stile dell'archivio.
   Il markup lo scrive menu/monate.php: <nav class="linkmonate kopf-<rubrica>"> con due <a class="linkmon">.
   Qui si tolgono i vecchi gradienti di menu/legende.css e dei legende-<rubrica>.css. */
.linkmonate,
.linkmonate * {
	box-sizing: border-box !important;
}
nav.linkmonate {
	float: none;
	clear: both;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 1000px;
	margin: 16px auto;
	padding: 0 12px;
}
nav.linkmonate .monatevn {
	float: none;
}
nav.linkmonate .nach {
	margin-left: auto;
	text-align: right;
}
.linkmonate a.linkmon {
	display: inline-block;
	margin: 0;
	padding: 8px 18px;
	border: 1px solid var(--k-rand, #c8c8c8);
	border-radius: 999px;
	background: var(--k-hell, #f4f4f4);
	box-shadow: 0 2px 5px rgba(0, 0, 0, .14);
	text-shadow: none;
	color: var(--k-dunkel, #333);
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}
.linkmonate a.linkmon:visited {
	color: var(--k-dunkel, #333);
}
.linkmonate a.linkmon:hover,
.linkmonate a.linkmon:focus {
	background: #fff;
	border-color: var(--k-dunkel, #333);
	color: var(--k-dunkel, #333);
	text-decoration: none;
}
.linkmonate a.linkmon:focus-visible {
	outline: 3px solid #000;
	outline-offset: 3px;
}
.linkmonate .vohr a.linkmon::before {
	content: "\2190\00a0";	/* freccia a sinistra */
}
.linkmonate .nach a.linkmon::after {
	content: "\00a0\2192";	/* freccia a destra */
}

/* "Geh zur Legende" sotto i "Geh zum..." (menu/monate.php, Sessione 14): stesso stile, solo nelle pagine delle rubriche.
   Le altre pagine con .Zurück.lege (duden/gedichte.php, inhaltsverzeichnis) restano come sono. */
.legeknopf a.Zurück.lege {
	display: inline-block;
	margin: 0;
	padding: 8px 18px;
	border: 1px solid var(--k-rand, #c8c8c8);
	border-radius: 999px;
	background: var(--k-hell, #f4f4f4);
	box-shadow: 0 2px 5px rgba(0, 0, 0, .14);
	text-shadow: none;
	color: var(--k-dunkel, #333);
	font-family: inherit;
	font-size: 17px !important;	/* wetter.css: .Zurück 18px !important */
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}
.legeknopf a.Zurück.lege:hover,
.legeknopf a.Zurück.lege:focus {
	background: #fff;
	border-color: var(--k-dunkel, #333);
	color: var(--k-dunkel, #333);
	text-decoration: none;
}
.legeknopf a.Zurück.lege:focus-visible {
	outline: 3px solid #000;
	outline-offset: 3px;
}
.legeknopf {
	margin-top: 24px;
}

/* "Zurück zur Titelseite (Home)" del footer (menu/footer.php, Sessione 14): uguale in tutte le rubriche,
   arancione vivace come prima ma leggibile (prima bianco su arancione, contrasto 2,1-3,1).
   kopf.css si carica solo nelle pagine delle rubriche: il resto del sito resta com'e'. */
.divback a.Zurück.home {
	--home-sfondo: #FF9F1C;
	--home-testo: #3D1A00;	/* 7,6 su --home-sfondo */
	--home-sopra: #3D1A00;	/* testo al passaggio del mouse, su bianco: 15,6 */
	--home-bordo: #B35F00;	/* bordo e ombra piena sotto: il pulsante "esce" dalla pagina */
	display: inline-block;
	margin: 0;
	padding: 8px 20px;
	border: 2px solid var(--home-bordo);
	border-radius: 999px;
	background: var(--home-sfondo);
	box-shadow: 0 3px 0 var(--home-bordo), 0 5px 12px rgba(0, 0, 0, .22);
	text-shadow: none;
	color: var(--home-testo);
	font-family: inherit;
	font-size: 17px !important;	/* wetter.css: .Zurück 18px !important */
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}
.divback a.Zurück.home:hover,
.divback a.Zurück.home:focus {
	background: #fff;
	border-color: var(--home-sopra);
	box-shadow: 0 3px 0 var(--home-sopra), 0 5px 12px rgba(0, 0, 0, .22);
	color: var(--home-sopra);
	text-decoration: none;
}
.divback a.Zurück.home:active {
	transform: translateY(2px);	/* si "schiaccia" al clic */
	box-shadow: 0 1px 0 var(--home-sopra);
}
.divback a.Zurück.home:focus-visible {
	outline: 3px solid #000;
	outline-offset: 3px;
}

@media only screen and (max-width: 560px) {
	nav.linkmonate {
		flex-direction: column;
		gap: 10px;
		padding-top: 14px;	/* nel Wetter la tabella del meteo sporge sotto il suo riquadro */
	}
	nav.linkmonate .monatevn:empty {
		display: none;
	}
	nav.linkmonate .nach {
		margin-left: 0;
	}
	nav.linkmonate .monatevn {
		text-align: center;
	}
	.linkmonate a.linkmon,
	.legeknopf a.Zurück.lege,
	.divback a.Zurück.home {
		font-size: 16px !important;
	}
}