/**  
 * Barrierefreiheit der Appbox-Shell (index.html, login.html).
 *
 * Eigene Datei, weil appboxy.css aus einem anderen Namespace ausgeliefert wird und hier nicht
 * vorliegt. Wird NACH appboxy.css eingebunden, damit die Regeln gewinnen.
 * Absichtlich klein gehalten: Screenreader-Hilfsklassen + Fokus-Effekte abschalten.
 */

/* Kein sichtbarer Fokus-Effekt - so gewuenscht.
   Betrifft auch den Ring, den Bootstrap von sich aus malt:
       button:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; }
   Der fiel besonders an Elementen auf, die vorher nicht fokussierbar waren (z.B. der Logout,
   der jetzt ein Button ist) und nach einem Klick fokussiert blieben.

   Hinweis: Damit gibt es keine sichtbare Fokus-Markierung mehr. Tastaturbedienung funktioniert
   weiter, ist aber ohne Screenreader nicht mehr nachvollziehbar (WCAG 2.4.7). Zum Zurueckholen
   nur fuer Tastaturbedienung genuegt:
       body a:focus-visible, body button:focus-visible, body input:focus-visible,
       body select:focus-visible, body textarea:focus-visible { outline: 2px solid #4d9fff; } */
body a:focus,
body button:focus,
body input:focus,
body select:focus,
body textarea:focus,
body [tabindex]:focus,
body iframe:focus {
	outline: none;
	box-shadow: none;
}

/* Logout-Button wieder an seinen Platz.
   Vorher war der Logout ein <span> INNERHALB des <a> und wurde von appboxy.css so gestylt:
       .footer-nav .dropdown-button .logout        { display: none; }
       .footer-nav .dropdown-button:hover .logout  { display: block; }
   Weil er jetzt Geschwister des <a> ist (als span im a war er per Tastatur nicht erreichbar),
   greift keine dieser Regeln mehr - er landete unter der Zeile und zeigte die Browser-Optik
   eines Buttons. Hier dieselbe Darstellung nachgebildet: rechts in der Zeile, versteckt bis
   zum Hover.
   Das <li> darf gefahrlos zum Bezugsrahmen werden: die einzige weitere absolut positionierte
   Ebene darin (.footer-nav .dropdown-nav) ist in appboxy.css dauerhaft display:none.

   Statt display:none wird mit opacity ausgeblendet - ein display:none-Element kann keinen Fokus
   erhalten, der Button waere sonst per Tastatur wieder unerreichbar. pointer-events:none haelt
   ihn im versteckten Zustand trotzdem aus der Maus-Trefferflaeche heraus. */
.navbar-appbox .footer-nav li {
	position: relative;
}

/* Groesse und Platz wie vorher: appboxy.css gab dem Icon ueber
       .navbar-appbox .footer-nav a i { width: 30px; font-size: 20px; }
   seine Box - diese Regel greift nur INNERHALB eines <a> und damit nicht mehr, seit das Icon in
   einem <button> sitzt. Ohne sie war das Icon kleiner und die Trefferflaeche lag daneben.
   right: 10px entspricht dem padding-right des Ankers, an dessen rechtem Rand der Logout als
   letztes Flex-Element sass. */
.navbar-appbox .footer-nav button.logout {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	/* Muss ueber dem Namen liegen: appboxy.css gibt .nav-link position:relative + z-index:3,
	   und .footer-nav .dropdown-button .nav-link { flex: 1 1 auto } streckt ihn ueber die ganze
	   Zeile. Solange der Button z-index:auto hatte, lag der Name darueber und hat Hover und Klick
	   abgefangen. Vorher trat das nicht auf, weil der Logout ein Flex-Element der Zeile war und
	   der Name nur in den restlichen Platz wuchs. */
	z-index: 4;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 20px;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* Der Name darf nicht unter das Icon laufen. Vorher reservierte der Logout als Flex-Element
   seine 30px in der Zeile und der Name wurde davor per ellipsis abgeschnitten; da der Button
   jetzt aus dem Fluss ist, uebernimmt das dieses padding. */
.navbar-appbox .footer-nav .dropdown-button .nav-link {
	padding-right: 34px;
}

/* Icon fuellt den Button, damit sichtbares Symbol und Trefferflaeche deckungsgleich sind */
.navbar-appbox .footer-nav button.logout i {
	width: 100%;
	font-size: inherit;
	line-height: inherit;
	vertical-align: middle;
}

/* wie vorher bei Hover - zusaetzlich bei Tastaturfokus, sonst waere der Button unsichtbar
   und man wuesste beim Durchtabben nicht, worauf man gerade steht */
.navbar-appbox .footer-nav li:hover button.logout,
.navbar-appbox .footer-nav li:focus-within button.logout {
	opacity: 1;
	pointer-events: auto;
}

/* Der Hover-Effekt gehoert nur dem Logout-Button selbst, nicht der Zeile oder dem Namen -
   deshalb hier bewusst KEINE Weitergabe des Hover-Zustands an .dropdown-button. */

.navbar-appbox .footer-nav button.logout:hover { 
	color: var(--brand-danger);
}

/* Nur fuer Screenreader: aus dem Layout genommen, aber im Accessibility-Tree lesbar. */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Wie .sr-only, wird aber bei Tastaturfokus sichtbar (Skip-Link). */
.sr-only-focusable:not(:focus) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.sr-only-focusable:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 8px 16px;
	clip: auto;
	background: #ffffff;
	color: #222222;
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
	border-radius: 3px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}