/* Menu nuovo (Fase 5, Sessione 28, docs/sito/16-MENU-NUOVO.md).
   Forma B: pulsante "Menü" fisso in alto a destra e pannello laterale; sottomenu a fisarmonica.
   Tutto sotto #gm: i CSS delle pagine (Bootstrap 3 e 5, menu.css, rubriche) non devono cambiarlo.
   Chrome 49 (PC dei genitori con XP): flexbox e variabili CSS si', niente Grid, gap, :has(), aspect-ratio.
   Colori delle rubriche: tavolozza "carta chiara" di menu/farben.css (contrasto del testo almeno 7:1). */

#gm, #gm * { box-sizing: border-box; }
#gm { font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.3; text-align: left; }
#gm ul, #gm li { list-style: none; margin: 0; padding: 0; }
#gm a { text-decoration: none; }
#gm a:focus, #gm button:focus { outline: 3px solid #1a5fb4; outline-offset: -3px; }

/* --- Pulsante "Menü" --- */
#gm .gm-auf {
	position: fixed; top: 0; right: 0; z-index: 10000;
	display: -webkit-box; display: -webkit-flex; display: flex;
	-webkit-box-align: center; -webkit-align-items: center; align-items: center;
	min-height: 48px; padding: 8px 14px 8px 12px;
	background: #810700; color: #fff; font-weight: bold; font-size: 18px;
	border-bottom-left-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
#gm .gm-auf:hover { background: #000e4c; color: #fff; }
#gm .gm-balken { display: inline-block; width: 24px; margin-right: 8px; }
#gm .gm-balken span { display: block; height: 3px; margin: 4px 0; background: #fff; border-radius: 2px; }

/* --- Pannello --- */
#gm .gm-panel {
	display: none;
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 10002;
	width: 380px; max-width: 100%;
	overflow-y: auto; -webkit-overflow-scrolling: touch;
	background: #fffdf8; color: #222;
	box-shadow: -4px 0 16px rgba(0,0,0,.35);
}
/* senza JavaScript: si apre con il link #gm-panel */
#gm .gm-panel:target { display: block; }
#gm .gm-schleier { display: none; }

/* con JavaScript: scorre da destra */
#gm.gm-js .gm-panel {
	display: block; visibility: hidden;
	-webkit-transform: translateX(105%); transform: translateX(105%);
	-webkit-transition: -webkit-transform .25s ease, visibility 0s linear .25s;
	transition: transform .25s ease, visibility 0s linear .25s;
}
#gm.gm-js.gm-zeigen .gm-panel {
	visibility: visible; -webkit-transform: none; transform: none;
	-webkit-transition: -webkit-transform .25s ease; transition: transform .25s ease;
}
#gm.gm-js.gm-zeigen .gm-schleier {
	display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10001;
	background: rgba(0,0,0,.45);
}

#gm .gm-kopf {
	display: -webkit-box; display: -webkit-flex; display: flex;
	-webkit-box-align: center; -webkit-align-items: center; align-items: center;
	-webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;
	padding: 6px 6px 6px 16px; background: #810700;
}
#gm .gm-titel { color: #fff; font-weight: bold; font-size: 20px; padding: 8px 0; }
#gm .gm-zu {
	display: -webkit-box; display: -webkit-flex; display: flex;
	-webkit-box-align: center; -webkit-align-items: center; align-items: center;
	min-height: 44px; padding: 6px 12px; color: #fff; font-size: 16px; border-radius: 6px;
}
#gm .gm-zu:hover { background: #000e4c; color: #fff; }
/* X disegnata (niente simboli: su XP sono rettangoli) */
#gm .gm-x { position: relative; display: inline-block; width: 18px; height: 18px; margin-right: 8px; }
#gm .gm-x:before, #gm .gm-x:after {
	content: ""; position: absolute; left: -2px; top: 8px; width: 22px; height: 3px; background: #fff; border-radius: 2px;
	-webkit-transform: rotate(45deg); transform: rotate(45deg);
}
#gm .gm-x:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

/* --- Voci principali --- */
#gm .gm-liste { padding: 6px 0 24px; }
#gm .gm-punkt { border-bottom: 1px solid #eadfd3; }
#gm .gm-haupt {
	display: -webkit-box; display: -webkit-flex; display: flex;
	-webkit-box-align: center; -webkit-align-items: center; align-items: center;
	width: 100%; min-height: 52px; padding: 10px 16px; margin: 0;
	background: transparent; border: 0; border-left: 5px solid transparent; border-radius: 0;
	color: #222; font: inherit; font-size: 19px; font-weight: bold; text-align: left; cursor: pointer;
}
#gm .gm-haupt:hover { background: #f6ece2; color: #000; }
#gm .gm-aktiv > .gm-haupt, #gm .gm-offen > .gm-haupt { border-left-color: #810700; }
#gm .gm-aktiv > .gm-haupt { background: #fbeee6; }
#gm .gm-icon { width: 24px; height: 24px; margin-right: 12px; color: #810700; -webkit-flex-shrink: 0; flex-shrink: 0; }
#gm .gm-text { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }

/* freccia disegnata: in giu' se chiuso, in su se aperto */
#gm .gm-pfeil {
	width: 10px; height: 10px; margin: 0 4px 4px 10px;
	border-right: 3px solid #810700; border-bottom: 3px solid #810700;
	-webkit-transform: rotate(45deg); transform: rotate(45deg);
}
#gm .gm-offen > .gm-haupt .gm-pfeil { margin-bottom: -4px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }

/* sottomenu: aperti senza JS, a fisarmonica con JS */
#gm .gm-unter { padding: 2px 12px 12px 16px; }
#gm.gm-js .gm-unter { display: none; }
#gm.gm-js .gm-offen > .gm-unter { display: block; }

#gm .gm-link {
	display: block; margin-top: 6px; padding: 10px 14px; min-height: 44px;
	background: #f7f3ee; color: #222; border-left: 6px solid #cbbfb2; border-radius: 6px;
}
#gm .gm-link:hover { background: #ece3d9; color: #000; }
#gm .gm-link.gm-aktiv { font-weight: bold; box-shadow: inset 0 0 0 2px currentColor; }
#gm .gm-name { display: block; font-size: 18px; }
#gm .gm-info { display: block; font-size: 15px; opacity: .85; margin-top: 2px; }
#gm .gm-zwischen { margin: 16px 0 2px; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: .05em; color: #5c5047; }
#gm .gm-aus { background: #fff1e6; border-left-color: #b34700; color: #7a2f00; }

/* Rubriche: foto tonda del peluche (o icona) su un cerchio con la sfumatura della rubrica, banda a sinistra
   con il colore pieno (back-2), fondo chiaro e testo scuro (kopf-hell / kopf-dunkel, contrasto almeno 7:1).
   Sessione 28: i colori solo chiari erano troppo simili tra loro. */
#gm .gm-rub { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; padding: 8px 12px 8px 8px; border-left-width: 10px; }
#gm .gm-bild { display: block; width: 52px; height: 52px; margin-right: 12px; padding: 2px; border-radius: 50%; overflow: hidden; -webkit-flex-shrink: 0; flex-shrink: 0; }
#gm .gm-bild img { display: block; width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fff; }
#gm .gm-bild .gm-icon { display: block; width: 48px; height: 48px; margin: 0; padding: 10px; border-radius: 50%; background: #fff; }
#gm .gm-worte { display: block; }
#gm .gm-rub .gm-name { font-weight: bold; }
#gm .gm-rub-news { background: var(--news-kopf-hell); border-left-color: var(--news-back-2); color: var(--news-kopf-dunkel); }
#gm .gm-rub-news .gm-bild { background: linear-gradient(135deg, var(--news-back-1), var(--news-back-2)); }
#gm .gm-rub-news .gm-icon { color: var(--news-kopf-dunkel); }
#gm .gm-rub-kri { background: var(--kri-kopf-hell); border-left-color: var(--kri-back-1); color: var(--kri-kopf-dunkel); }
#gm .gm-rub-kri .gm-bild { background: linear-gradient(135deg, var(--kri-back-1), var(--kri-back-2)); }
#gm .gm-rub-kri .gm-icon { color: var(--kri-kopf-dunkel); }
#gm .gm-rub-pro { background: var(--pro-kopf-hell); border-left-color: var(--pro-back-2); color: var(--pro-kopf-dunkel); }
#gm .gm-rub-pro .gm-bild { background: linear-gradient(135deg, var(--pro-back-1), var(--pro-back-2)); }
#gm .gm-rub-pro .gm-icon { color: var(--pro-kopf-dunkel); }
#gm .gm-rub-koch { background: var(--koch-kopf-hell); border-left-color: var(--koch-back-2); color: var(--koch-kopf-dunkel); }
#gm .gm-rub-koch .gm-bild { background: linear-gradient(135deg, var(--koch-back-1), var(--koch-back-2)); }
#gm .gm-rub-koch .gm-icon { color: var(--koch-kopf-dunkel); }
#gm .gm-rub-wetter { background: var(--wetter-kopf-hell); border-left-color: var(--wetter-back-1); color: var(--wetter-kopf-dunkel); }
#gm .gm-rub-wetter .gm-bild { background: linear-gradient(135deg, var(--wetter-back-1), var(--wetter-back-2)); }
#gm .gm-rub-wetter .gm-icon { color: var(--wetter-kopf-dunkel); }
#gm .gm-rub-garten { background: var(--garten-kopf-hell); border-left-color: var(--garten-back-1); color: var(--garten-kopf-dunkel); }
#gm .gm-rub-garten .gm-bild { background: linear-gradient(135deg, var(--garten-back-1), var(--garten-back-2)); }
#gm .gm-rub-garten .gm-icon { color: var(--garten-kopf-dunkel); }
#gm .gm-rub-umwelt { background: var(--umwelt-kopf-hell); border-left-color: var(--umwelt-back-2); color: var(--umwelt-kopf-dunkel); }
#gm .gm-rub-umwelt .gm-bild { background: linear-gradient(135deg, var(--umwelt-back-1), var(--umwelt-back-2)); }
#gm .gm-rub-umwelt .gm-icon { color: var(--umwelt-kopf-dunkel); }
#gm .gm-rub-ornithologie { background: var(--ornithologie-kopf-hell); border-left-color: var(--ornithologie-back-1); color: var(--ornithologie-kopf-dunkel); }
#gm .gm-rub-ornithologie .gm-bild { background: linear-gradient(135deg, var(--ornithologie-back-1), var(--ornithologie-back-2)); }
#gm .gm-rub-ornithologie .gm-icon { color: var(--ornithologie-kopf-dunkel); }
#gm .gm-rub-insekten { background: var(--insekten-kopf-hell); border-left-color: var(--insekten-back-1); color: var(--insekten-kopf-dunkel); }
#gm .gm-rub-insekten .gm-bild { background: linear-gradient(135deg, var(--insekten-back-1), var(--insekten-back-2)); }
#gm .gm-rub-insekten .gm-icon { color: var(--insekten-kopf-dunkel); }
#gm .gm-rub-pilze { background: var(--pilze-kopf-hell); border-left-color: var(--pilze-back-2); color: var(--pilze-kopf-dunkel); }
#gm .gm-rub-pilze .gm-bild { background: linear-gradient(135deg, var(--pilze-back-1), var(--pilze-back-2)); }
#gm .gm-rub-pilze .gm-icon { color: var(--pilze-kopf-dunkel); }
#gm .gm-rub:hover { -webkit-filter: brightness(.95); filter: brightness(.95); }
#gm .gm-rub.gm-aktiv { box-shadow: inset 0 0 0 3px var(--gm-aktiv, currentColor); }

/* --- Calendari: una riga per calendario, anni affiancati --- */
#gm .gm-kal { margin-top: 8px; padding: 8px 10px 4px; border-left: 6px solid #cbbfb2; border-radius: 6px; background: #f7f3ee; }
#gm .gm-kal-name { display: block; font-weight: bold; margin-bottom: 4px; }
#gm .gm-jahre { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -3px; }
#gm .gm-jahr {
	display: inline-block; min-width: 58px; margin: 3px; padding: 8px 6px; text-align: center;
	background: #fff; color: inherit; font-size: 16px; border: 1px solid currentColor; border-radius: 6px;
}
#gm .gm-jahr:hover { background: #222; color: #fff; }
#gm .gm-jahre .gm-jahr:first-child { font-weight: bold; }
#gm .gm-jetzt .gm-info { font-weight: bold; }

#gm .gm-kal-advent, #gm .gm-link.gm-kal-advent { background: #fdeeee; border-left-color: #c62828; color: #7f1414; }
#gm .gm-kal-ostern, #gm .gm-link.gm-kal-ostern { background: #fbf6dc; border-left-color: #c9a400; color: #5c4a00; }
#gm .gm-kal-sommer, #gm .gm-link.gm-kal-sommer { background: #e8f3fc; border-left-color: #3b8ed6; color: #0d4775; }
#gm .gm-kal-sonder, #gm .gm-link.gm-kal-sonder { background: #f3ebfb; border-left-color: #8e5cc4; color: #4e2380; }

/* --- Telefono: pannello a tutta larghezza --- */
@media (max-width: 480px) {
	#gm .gm-panel { width: 100%; box-shadow: none; }
	#gm .gm-auf-text { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	#gm.gm-js .gm-panel, #gm.gm-js.gm-zeigen .gm-panel { -webkit-transition: none; transition: none; }
}

@media print {
	#gm { display: none; }
}
/* Foto in grande (fotogross/NNN.php, Sessione 35): il titolo cominciava in cima alla pagina e finiva sotto il pulsante.
   !important: menu/fotogross.js scrive width e left nello stile del titolo (spazio per il menu vecchio). */
.main > .TITEL:first-child { float: none; clear: both; width: auto !important; left: 0 !important; text-align: center; padding-left: 160px; padding-right: 160px; }
@media only screen and (max-width: 740px) {
	.main > .TITEL:first-child { padding: 56px 8px 0; }
}
/* Foto in grande (Sessione 38): KompoZer a volte scrive nella foto style="width: 1200px; height: 900px".
   Sugli schermi stretti max-width riduceva la larghezza ma l'altezza restava fissa: foto allungata.
   !important serve contro lo stile scritto nella pagina del padre, che non si tocca. */
.BILD > img.bild { width: auto !important; height: auto !important; }