/* ==========================================================================
   VISARO — Mobile Navigation
   --------------------------------------------------------------------------
   Drill-down statt Accordion. Bei rund 30 Links entstünde sonst eine
   3.000 px lange Liste (Design Concept Kap. 17).

   Der Drawer ist ein Dialog: Fokus wird gefangen, der Hintergrund scrollt
   nicht, Esc und der Zurück-Button schließen.

   Hell und editorial — bewusst nicht die dunkle Glasfläche aus der Referenz.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   PANEL
   ══════════════════════════════════════════════════════════════════════════ */

.vis-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--vis-z-drawer);
	display: flex;

	visibility: hidden;
	transition: visibility 0s linear var(--vis-duration-ui);
}

.vis-drawer.is-open {
	visibility: visible;
	transition-delay: 0s;
}

.vis-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(23, 33, 58, 0.4);
	opacity: 0;
	transition: opacity var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-drawer.is-open .vis-drawer__scrim { opacity: 1; }

/* Fährt von links ein — die Referenz zeigt diese Richtung, und der Burger
   steht ebenfalls links. */
.vis-drawer__panel {
	position: relative;
	display: flex;
	flex-direction: column;

	inline-size: min(420px, 100%);
	block-size: 100dvh;
	background: var(--vis-bg);

	transform: translateX(-100%);
	transition: transform var(--vis-duration-ui) var(--vis-ease-inout);
}

.vis-drawer.is-open .vis-drawer__panel { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.vis-drawer__panel { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   KOPF
   ══════════════════════════════════════════════════════════════════════════ */

.vis-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vis-space-3);

	min-block-size: var(--vis-header-height);
	padding-inline: var(--vis-gutter);
	border-block-end: var(--vis-border-width) solid var(--vis-border);
	flex: none;
}

.vis-drawer__brand { display: inline-flex; align-items: center; }

.vis-drawer__head img { block-size: var(--vis-logo-height-mobile); inline-size: auto; }

.vis-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	inline-size: var(--vis-tap-target-min);
	block-size: var(--vis-tap-target-min);
	border: 0;
	border-radius: var(--vis-radius-sm);
	background: transparent;
	color: var(--vis-text);
	cursor: pointer;
}

.vis-drawer__close:hover  { background: var(--vis-ink-100); }
.vis-drawer__close:active { background: var(--vis-ink-200); }

.vis-drawer__close:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-accent);
	outline-offset: var(--vis-focus-offset);
}

/* ══════════════════════════════════════════════════════════════════════════
   EBENEN
   Ebene 1 und die Unterebenen liegen übereinander und gleiten horizontal.
   Nur die aktive Ebene ist fokussierbar.
   ══════════════════════════════════════════════════════════════════════════ */

/* `clip` statt `hidden` (07.10.2026): Ein `overflow: hidden`-Behälter lässt
   sich weiterhin programmatisch scrollen. Ein Fokus auf „Zurück“, während
   die Unterebene noch rechts außerhalb stand, schob den ganzen Bereich um
   eine Breite zur Seite — die aktive Ebene lag danach außerhalb, der
   Drawer war in der Mitte leer. `clip` kann nicht gescrollt werden. */
.vis-drawer__body {
	position: relative;
	flex: 1;
	min-block-size: 0;
	overflow: hidden;
	overflow: clip;
}

.vis-drawer__level {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;

	padding-block: var(--vis-space-2) var(--vis-space-8);

	transform: translateX(0);
	opacity: 1;
	transition:
		transform var(--vis-duration-ui) var(--vis-ease-inout),
		opacity var(--vis-duration-micro) var(--vis-ease-inout),
		visibility 0s linear 0s;
}

/* Unterebenen warten rechts außerhalb. */
.vis-drawer__level[data-level="2"] {
	transform: translateX(100%);
	opacity: 0;
	visibility: hidden;
	transition-delay: 0s, 0s, var(--vis-duration-ui);
}

/* Ebene 1 rutscht nach links, wenn eine Unterebene offen ist. */
.vis-drawer.is-drilled .vis-drawer__level[data-level="1"] {
	transform: translateX(-30%);
	opacity: 0;
	visibility: hidden;
	transition-delay: 0s, 0s, var(--vis-duration-ui);
}

.vis-drawer__level.is-active {
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
	.vis-drawer__level { transition-property: opacity, visibility; }
	.vis-drawer__level[data-level="2"],
	.vis-drawer.is-drilled .vis-drawer__level[data-level="1"] { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ZEILEN
   ══════════════════════════════════════════════════════════════════════════ */

.vis-drawer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vis-drawer__item {
	display: flex;
	align-items: center;
	gap: var(--vis-space-3);
	inline-size: 100%;

	min-block-size: var(--vis-drawer-row);
	padding-inline: var(--vis-gutter);
	padding-block: var(--vis-space-3);

	border: 0;
	border-block-end: var(--vis-border-width) solid var(--vis-border);
	background: transparent;
	text-align: start;

	color: var(--vis-text);
	font-family: var(--vis-font-sans);
	font-size: var(--vis-fs-body-l);
	font-weight: var(--vis-fw-medium);
	text-decoration: none;
	cursor: pointer;

	transition: background-color var(--vis-duration-micro) var(--vis-ease-out);
}

.vis-drawer__item:hover  { background: var(--vis-ink-100); }
.vis-drawer__item:active { background: var(--vis-ink-200); }

.vis-drawer__item:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-accent);
	outline-offset: calc(var(--vis-focus-offset) * -1);
}

.vis-drawer__item-icon {
	inline-size: var(--vis-space-5);
	block-size: var(--vis-space-5);
	color: var(--vis-text-3);
	flex: none;
}

.vis-drawer__item-label { flex: 1; min-inline-size: 0; }

.vis-drawer__item-chevron {
	inline-size: var(--vis-space-5);
	block-size: var(--vis-space-5);
	color: var(--vis-text-3);
	flex: none;
}

/* Ohne Ziel: sichtbar, aber ohne jede Reaktion — der Eintrag darf sich
   nicht anfuehlen wie ein Ziel, das es noch nicht gibt. */
.vis-drawer__item.is-pending {
	color: var(--vis-text-3);
	cursor: default;
}

.vis-drawer__item.is-pending:hover,
.vis-drawer__item.is-pending:active { background: transparent; }

/* Unterebene: Zurück-Zeile und Gruppentitel */
.vis-drawer__back {
	display: flex;
	align-items: center;
	gap: var(--vis-space-2);
	inline-size: 100%;

	min-block-size: var(--vis-tap-target-min);
	padding-inline: var(--vis-gutter);
	padding-block: var(--vis-space-3);
	margin-block-end: var(--vis-space-2);

	border: 0;
	background: transparent;
	color: var(--vis-text-2);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
	text-align: start;
	cursor: pointer;
}

.vis-drawer__back:hover { color: var(--vis-text); }

.vis-drawer__back:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-accent);
	outline-offset: calc(var(--vis-focus-offset) * -1);
}

.vis-drawer__back .vis-icon {
	inline-size: var(--vis-space-4);
	block-size: var(--vis-space-4);
}

.vis-drawer__group {
	display: flex;
	align-items: center;
	gap: var(--vis-space-2);

	padding-inline: var(--vis-gutter);
	padding-block: var(--vis-space-6) var(--vis-space-2);

	color: var(--vis-text-3);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	font-weight: var(--vis-fw-medium);
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
}

.vis-drawer__group .vis-icon {
	inline-size: var(--vis-space-4);
	block-size: var(--vis-space-4);
}

/* Unterlinks stehen dichter als die Hauptzeilen. */
.vis-drawer__sub {
	min-block-size: var(--vis-drawer-row-sm);
	font-size: var(--vis-fs-body);
	font-weight: var(--vis-fw-regular);
}

/* ══════════════════════════════════════════════════════════════════════════
   FUSSBEREICH
   Hier lebt der persönliche, regionale Charakter — direkte Erreichbarkeit
   ist mobil eine Kernfunktion, keine Fußnote.
   ══════════════════════════════════════════════════════════════════════════ */

.vis-drawer__foot {
	flex: none;
	padding: var(--vis-space-5) var(--vis-gutter);
	padding-block-end: calc(var(--vis-space-5) + env(safe-area-inset-bottom, 0px));
	border-block-start: var(--vis-border-width) solid var(--vis-border);
	background: var(--vis-bg-subtle);

	display: grid;
	gap: var(--vis-space-3);
}

.vis-drawer__foot .vis-btn { inline-size: 100%; }

.vis-drawer__contact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vis-space-4);
	margin-block-start: var(--vis-space-2);
}

.vis-drawer__contact a {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-2);
	min-block-size: var(--vis-tap-target-min);

	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
	text-decoration: none;
}

.vis-drawer__contact a:hover { color: var(--vis-accent-text); }

.vis-drawer__contact .vis-icon {
	inline-size: var(--vis-space-4);
	block-size: var(--vis-space-4);
}

.vis-drawer__meta {
	color: var(--vis-text-3);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
}

/* Der Drawer existiert nur unterhalb des Desktop-Umschaltpunkts. */
@media (min-width: 1100px) {
	.vis-drawer { display: none; }
}

/* Hintergrund sperren, solange der Drawer offen ist. */
.visaro-drawer-open {
	overflow: hidden;
	touch-action: none;
}

/* Der Gruppentitel führt auf die Hauptseite. Auf Touch ist das der
   naheliegendste Weg dorthin — dort gibt es kein Hover, mit dem sich ein
   Mega-Menü öffnen ließe. */
a.vis-drawer__group {
	display: flex;
	align-items: center;
	gap: var(--vis-space-2);
	text-decoration: none;
}

.vis-drawer__group-arrow {
	margin-inline-start: auto;
	display: inline-flex;
	color: var(--vis-text-3);
}

.vis-drawer__group-arrow .vis-icon {
	inline-size: var(--vis-space-4);
	block-size: var(--vis-space-4);
}

a.vis-drawer__group:hover,
a.vis-drawer__group:focus-visible { color: var(--vis-accent-text); }

a.vis-drawer__group:hover .vis-drawer__group-arrow { color: var(--vis-accent-text); }

/* „Alle ansehen" schließt die Liste ab: dieselbe Zeilenhöhe wie die
   Unterpunkte, aber in Purple und mit Pfeil. */
.vis-drawer__more {
	color: var(--vis-accent-text);
	font-weight: var(--vis-fw-medium);
}

.vis-drawer__more .vis-icon {
	margin-inline-start: auto;
	inline-size: var(--vis-space-4);
	block-size: var(--vis-space-4);
}

/* ── Du bist hier ────────────────────────────────────────────────────────
   Markierung statt Link — nicht ausgegraut wie is-pending, sondern in
   Purple: Der Eintrag ist nicht unfertig, er ist erreicht. */

.vis-drawer__group.is-current {
	color: var(--vis-accent-text);
	cursor: default;
}

.vis-drawer__group.is-current .vis-icon { color: var(--vis-accent-text); }

.vis-drawer__item.is-current {
	color: var(--vis-accent-text);
	font-weight: var(--vis-fw-medium);
	cursor: default;
}

.vis-drawer__item.is-current:hover,
.vis-drawer__item.is-current:active { background: transparent; }

/* ══════════════════════════════════════════════════════════════════════════
   EBENE 2 — LEISTUNGEN ALS ZIELE, NICHT ALS ÜBERSCHRIFTEN
   Die Ebene zeigt seit dem Mobile-QA sechs Bereiche und darunter nur, was
   eine eigene Seite hat. Die eingerückte Liste ist deshalb eine Ergänzung
   zur Zeile darüber und kein zweiter Block.
   ══════════════════════════════════════════════════════════════════════════ */

.vis-drawer__list--sub {
	margin-block-end: var(--vis-space-2);
	border-inline-start: var(--vis-border-width) solid var(--vis-border);
	margin-inline-start: calc(var(--vis-gutter) + var(--vis-space-6));
}

.vis-drawer__list--sub .vis-drawer__sub {
	padding-inline-start: var(--vis-space-4);
	color: var(--vis-text-2);
}

.vis-drawer__more .vis-drawer__item-label { font-weight: var(--vis-fw-medium); }

/* Der Fuß trägt zwei Knöpfe und eine Zeile Kontakt — nicht mehr.
   Vorher nahm er 260 von 844 px ein. */
.vis-drawer__contact {
	gap: var(--vis-space-6);
	margin-block-start: 0;
}

.vis-drawer__contact a { min-block-size: var(--vis-space-8); }