/* ---------------------------------------------------------------------
 * Hilfe-Panel - Verhalten und Zustand, nicht Aussehen
 *
 * Das Panel fährt von rechts ein. Unter 1280 px legt es sich über den
 * Inhalt, darüber steht es daneben und nimmt ihm Platz weg. Farben,
 * Schatten, Innenabstände und der Inhalt liegen vollständig in Bricks;
 * diese Datei enthält nur, was Bricks nicht leisten kann.
 *
 * DOM-Vertrag (in Bricks zu setzen, alles als data-Attribut):
 *
 *   [data-sw-help-trigger]   Öffner, liegt AUSSERHALB des Panels
 *   [data-sw-help-panel]     der Kasten, der einfährt
 *   [data-sw-help-close]     Schliessen-Knopf im Kopf des Panels
 *
 * Der Schleier (.sw-help-scrim) wird vom Modul erzeugt, nicht in
 * Bricks - er hat kein gestalterisches Eigenleben, muss zwingend genau
 * unter dem Panel liegen, und nebeneinander darf er gar nicht
 * existieren. Das ist alles Verhalten. Seine Gestaltung ist trotzdem
 * von aussen einstellbar, siehe --sw-help-scrim-*.
 *
 * ⚠️ SPEZIFITÄT: Eine Bricks-Klasse ist ZWEI Klassen
 * (.app__sidebar-help.brxe-div = (0,2,0)) und steht inline im <head>,
 * gewinnt also auch jeden Gleichstand. Regeln, die dagegen antreten,
 * stehen deshalb bei mindestens (0,3,0) - dreifach geschriebenes
 * Attribut, dasselbe Mittel wie beim Drawer.
 * ------------------------------------------------------------------- */

:root {
	/* ---------------------------------------------------------------
	 * Von aussen einstellbar - Sven ändert das in Bricks, ohne Code
	 * anzufassen.
	 * --------------------------------------------------------------- */

	/* Vorgabe. Die endgültige Breite legt Sven fest; das Modul rechnet
	   mit ihr, gibt sie nicht vor. */
	--sw-help-width: 380px;

	--sw-help-scrim-color: 0 0 0;
	--sw-help-scrim-opacity: 45%;

	/* ---------------------------------------------------------------
	 * 🔴 EINE DAUER FÜR BEIDE BEWEGUNGEN (09.09.2026)
	 *
	 * Links schrumpft die Sidebar, rechts fährt das Panel ein - der
	 * Inhalt wird von beiden Seiten angefasst. Mit unterschiedlichen
	 * Werten sieht das nach zwei Rucklern aus statt nach einer
	 * Bewegung.
	 *
	 * Der Wert ist der bestehende des Drawers (240ms ease), nicht ein
	 * neu erfundener. sidebar.css liest dieselbe Property für die
	 * Breitenanimation; sie lag vorher bei .18s und ist damit
	 * angeglichen - das ist die einzige sichtbare Änderung am
	 * bestehenden Verhalten.
	 * --------------------------------------------------------------- */
	--sw-panel-duration: 240ms;
	--sw-panel-easing: ease;

	/* ---------------------------------------------------------------
	 * Der Stufenschalter - dieselbe Bauform wie
	 * --sichtwechsel-sidebar-spur.
	 *
	 * 0 = Overlay (Panel liegt über dem Inhalt, ist ein Modal)
	 * 1 = nebeneinander (Panel nimmt Platz weg, ist KEIN Modal)
	 *
	 * Alles Weitere liest nur diesen Wert: die Breite darunter, der
	 * Schleier, und das JS über getComputedStyle für die Frage
	 * "Fokusfalle ja oder nein". Keine zweite Zahl im JavaScript.
	 * --------------------------------------------------------------- */
	--sw-help-side-by-side: 0;

	/* Zwilling der Zahl in der Media-Query darunter, für das JS. Eine
	   Media-Query kann keine Custom Property lesen - dieselbe
	   unauflösbare Doppelung wie beim Sidebar-Umbruch, deshalb stehen
	   die beiden Zeilen direkt beieinander.

	   1280 und keine neue Zahl: Es ist derselbe Punkt, ab dem die
	   Sidebar ihre volle Breite bekommt (sidebar.css, "Drei Stufen").
	   Bei eingeklappter Sidebar bleiben hier noch rund 800 px für den
	   Inhalt. Eine dritte Zahl im System wäre eine dritte Stelle, die
	   beim nächsten Umbau vergessen wird. */
	--sw-help-breakpoint: 1280px;

	/* ---------------------------------------------------------------
	 * Der Platz, den der Inhalt rechts freihalten muss.
	 *
	 * 0px wenn zu, 0px im Overlay-Modus, Panelbreite wenn offen UND
	 * nebeneinander. Aus dem Schalter gerechnet statt an mehreren
	 * Stellen gesetzt - so kann der Platz gar nicht vom Modus
	 * abweichen.
	 *
	 * ⚠️ ZU LESEN IN BRICKS, nicht hier zu setzen: Die Topbar bindet
	 * ihr `right` daran, der Inhaltsbereich sein `padding-right`.
	 * Analog zu --sichtwechsel-sidebar-aktuelle-breite, die diese
	 * Datei ebenfalls nicht selbst anwendet.
	 *
	 * 🔴 DIE TOPBAR HAT left, right UND width: auto - das `auto` MUSS
	 * bleiben. left + right spannen auf; sobald daneben eine feste
	 * width steht, gewinnt die Breite und `right` wird ignoriert. Das
	 * hat schon einmal einen Abend gekostet.
	 * --------------------------------------------------------------- */
	--sw-help-current-width: 0px;
}

/* Zwilling 1 von 2: hebt den Schalter. Der zweite steht weiter unten
   beim Scroll-Riegel und muss mitgeändert werden. */
@media (min-width: 1280px) {
	:root {
		--sw-help-side-by-side: 1;
	}
}

html.sw-help-open {
	--sw-help-current-width: calc(
		var(--sw-help-width) * var(--sw-help-side-by-side)
	);
}

/* ---------------------------------------------------------------------
 * Das Panel
 *
 * position: fixed und transform statt left/right: Eine
 * Positionsänderung zwänge den Browser bei jedem Einzelbild zum
 * Neuberechnen des Layouts.
 *
 * ⚠️ EIN transform AN EINEM VORFAHREN MACHT AUS position: fixed
 * STILLSCHWEIGEND eine Positionierung relativ zu diesem Element. Klebt
 * das Panel trotz korrekter Regeln an der falschen Stelle, ist das die
 * erste Spur - im globalen Template nach transform oder
 * overflow: hidden an einem Elternelement suchen.
 * ------------------------------------------------------------------- */

[data-sw-help-panel][data-sw-help-panel][data-sw-help-panel] {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 400;

	width: var(--sw-help-width);
	max-width: 100%;

	/* Ausserhalb des Bildes geparkt. */
	transform: translateX(100%);

	/*
	 * 🔴 visibility ZUSÄTZLICH ZUM transform (Fehler im Test vom
	 * 09.09.2026 gefunden): Ein nur verschobenes Panel bleibt in der
	 * Tabreihenfolge. Ohne diese Zeile tabbt man aus dem Formular in
	 * Links, die niemand sieht - und im Nebeneinander-Modus gibt es
	 * keine Fokusfalle, die das auffangen würde.
	 *
	 * Die Verzögerung hält das Panel während des Ausfahrens sichtbar;
	 * erst danach fällt es aus der Reihenfolge. Dasselbe Muster wie
	 * beim Schleier darunter.
	 */
	visibility: hidden;

	transition:
		transform var(--sw-panel-duration) var(--sw-panel-easing),
		visibility 0s linear var(--sw-panel-duration);

	/* Eine lange Liste muss im Panel scrollen können, ohne die Seite
	   dahinter mitzunehmen. */
	overflow-y: auto;
	overscroll-behavior: contain;
}

html.sw-help-open [data-sw-help-panel][data-sw-help-panel][data-sw-help-panel] {
	transform: translateX(0);
	visibility: visible;
	transition: transform var(--sw-panel-duration) var(--sw-panel-easing);
}

/* ---------------------------------------------------------------------
 * Der Schleier - nur im Overlay-Modus
 *
 * Ein echtes Element, kein Pseudo: Es muss den Tipp zum Schliessen
 * entgegennehmen, und das kann ein Pseudo-Element des <html> nicht.
 * ------------------------------------------------------------------- */

.sw-help-scrim {
	position: fixed;
	inset: 0;
	z-index: 399;
	background-color: rgb(var(--sw-help-scrim-color) / var(--sw-help-scrim-opacity));
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--sw-panel-duration) var(--sw-panel-easing),
		visibility 0s linear var(--sw-panel-duration);
}

html.sw-help-open .sw-help-scrim {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--sw-panel-duration) var(--sw-panel-easing);
}

/*
 * Nebeneinander gibt es keinen Schleier - das Panel ist dort kein
 * Modal. Die Regel liest den Schalter, nicht die Breite: Es gibt genau
 * eine Stelle, an der entschieden wird, welcher Modus gilt.
 */
@container style(--sw-help-side-by-side: 1) {
	.sw-help-scrim {
		display: none;
	}
}

/* ---------------------------------------------------------------------
 * Im Overlay-Modus darf die Seite dahinter nicht scrollen.
 *
 * Am <html>, nicht am <body>: iOS Safari nimmt overflow: hidden nur
 * dort zuverlässig an. Nebeneinander gilt das NICHT - dort arbeitet die
 * Person weiter auf der Seite.
 *
 * 🔴 DIE EINZIGE REGEL, DIE DEN SCHALTER NICHT LESEN KANN. Eine
 * Style-Query prüft den nächsten VORFAHREN; <html> hat keinen, also
 * kann @container dort niemals treffen. Deshalb hier ausnahmsweise die
 * Zahl - als Zwilling der Media-Query oben, direkt daneben
 * geschrieben, damit beide zusammen geändert werden. Überall sonst
 * liest das CSS den Schalter.
 * ------------------------------------------------------------------- */

@media (max-width: 1279px) {
	html.sw-help-open {
		overflow: hidden;
	}
}

/* ---------------------------------------------------------------------
 * Wer keine Bewegung will
 *
 * Das Panel erscheint, statt zu fahren. Der Endzustand ist derselbe -
 * die Bewegung ist Darstellung, nicht Zustand.
 * ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	[data-sw-help-panel][data-sw-help-panel][data-sw-help-panel],
	.sw-help-scrim {
		transition: none;
	}
}