/**
 * Barrierefreiheit: gleicht aus, was der Umbau des Menue-Markups nach sich zieht.
 *
 * Im Original standen die Menuepunkte (<li>) in <div>-Elementen, und diese <div> steckten in
 * einem <ul>. Beides ist ungueltiges HTML und kostet bei Google Punkte. Jetzt sind
 * #logo_menu_header und #links_menu echte Listen, und der Fussbereich des Handy-Menues
 * (foot-bloque2) liegt daneben statt darin, weil eine Liste nur <li> enthalten darf.
 *
 * Zwei Dinge muessen dafuer nachgezogen werden.
 */

/* 1. Listen bekommen vom Browser Aufzaehlungspunkte. Vorher waren es <div>, da gab es keine.
      Margins und Innenabstaende raeumt bereits o_24.css weg: hier NICHT nochmal setzen,
      sonst faellt das eigene margin-left von #logo_menu_header weg (gemessen). */
#logo_menu_header,
#links_menu {
	list-style: none;
}

/* 2. Der Fussbereich lag frueher in #links_menu und war damit automatisch versteckt, solange
      das Handy-Menue zugeklappt war (#links_menu ist dann display:none). Ausserdem holte er
      sich von dort seine Innenabstaende. Beides gilt jetzt fuer den neuen Platz. */
@media screen and (orientation: portrait), screen and (max-width: 768px) {

	#menu-toggle:not(:checked) ~ .menu > .foot-bloque2 {
		display: none;
	}

	#menu-toggle:checked ~ .menu > .foot-bloque2 {
		grid-column: 3 / 23;
		padding-top: calc(var(--u-100) * 6);
		padding-bottom: calc(var(--u-100) * 1);

		/* #links_menu hat ein margin-bottom von --u-100. Frueher lag der Fussbereich noch
		   INNERHALB, der Abstand kam also nach ihm. Jetzt liegt er dahinter und wuerde um
		   genau diesen Abstand nach unten rutschen (gemessen: 16 px). */
		margin-top: calc(var(--u-100) * -1);
	}

	/* Die Spalte des offenen Menues war frueher so breit wie der Fussbereich (313 px), weil
	   der mit darin lag. Ohne ihn richtet sie sich nur noch nach dem laengsten Menuepunkt
	   (239 px) und die zentrierten Beschriftungen ruecken nach links. Deshalb die Spalte
	   wieder auf die volle Breite festlegen (gemessen). */
	#menu-toggle:checked ~ .menu > #links_menu {
		grid-template-columns: 100%;
	}
}

/* Der Hauptbereich darf das Layout nicht veraendern: die Container muessen Geschwister
   bleiben, sonst greifen Nachbar-Selektoren des Original-CSS anders (gemessen: ein
   Ornament tauchte auf). "display: contents" nimmt das <main> aus dem Layout.
   Ob es dabei seine Rolle fuer Screenreader behaelt, ist geprueft (siehe CLAUDE.md). */
main#inhalt {
	display: contents;
}

/* Das Original-CSS verweist auf img/firulete.svg. Diese Datei hat es nie gegeben, weder in
   der alten Handseite noch sonstwo: der Verweis lief immer ins Leere. Bisher fiel das nicht
   auf, weil Elementor Hintergrundbilder erst beim Hinscrollen laedt und dieses nie angefragt
   wurde. Ohne die Regel gaebe es jetzt bei jedem Seitenaufruf einen 404 in der Konsole. */
#logo_letras_footer {
	background-image: none;
}