/* ==========================================================================
   VISARO — Corporate Header
   --------------------------------------------------------------------------
   Eine Zeile. Die Tiefe liegt im Mega-Menü (Design Concept Kap. 14.1).

   Aufbau: Logo links · Navigation daneben · Kundenbereich und CTA rechts.
   Bewusst nicht zentriert — linksbündig nach dem Logo wirkt editorialer und
   funktioniert bei unterschiedlich langen deutschen Labels besser.

   Non-Negotiable: kein Warenkorb, kein Shopkonto, keine Wishlist, keine
   Produktsuche. Das sind Shopwelt-Funktionen.

   Alle Werte aus tokens.css.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   GERÜST
   ══════════════════════════════════════════════════════════════════════════ */

.vis-header {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--vis-z-header);

	background: var(--vis-bg);
	border-block-end: var(--vis-border-width) solid transparent;

	transition:
		background-color var(--vis-duration-ui) var(--vis-ease-inout),
		border-color var(--vis-duration-ui) var(--vis-ease-inout),
		backdrop-filter var(--vis-duration-ui) var(--vis-ease-inout);
}

.vis-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--vis-space-6);

	max-width: var(--vis-container-wide);
	margin-inline: auto;
	padding-inline: var(--vis-gutter);

	block-size: var(--vis-header-height);
	transition: block-size var(--vis-duration-ui) var(--vis-ease-inout);
}

/* ── Gescrollt ───────────────────────────────────────────────────────────
   Ruhig, kompakter, mit feiner Trennkante. Kein Schatten, kein Springen.
   Der Header blendet sich beim Scrollen nie aus. */

.vis-header.is-scrolled {
	background: color-mix(in srgb, var(--vis-white) 88%, transparent);
	border-block-end-color: var(--vis-border);
}

@supports (backdrop-filter: blur(1px)) {
	.vis-header.is-scrolled {
		backdrop-filter: blur(12px) saturate(1.4);
	}
}

/* Ohne backdrop-filter volle Deckkraft, sonst wäre der Text unruhig. */
@supports not (backdrop-filter: blur(1px)) {
	.vis-header.is-scrolled { background: var(--vis-white); }
}

.vis-header.is-scrolled .vis-header__inner {
	block-size: var(--vis-header-height-scrolled);
}

/* ── Transparent über dem Hero ───────────────────────────────────────────
   Nur auf Startseite, Leistungsseiten und Shopwelt-Landingpages
   (CLAUDE.md, E6). Sobald gescrollt wird, greift der solide Zustand. */

.visaro-header-transparent .vis-header:not(.is-scrolled) {
	position: fixed;
	inset-inline: 0;
	background: transparent;
	border-block-end-color: transparent;

	--vis-text: var(--vis-white);
	--vis-text-2: var(--vis-ink-300);
	--vis-text-3: var(--vis-ink-300);
	--vis-border: color-mix(in srgb, var(--vis-white) 24%, transparent);
	--vis-border-strong: color-mix(in srgb, var(--vis-white) 45%, transparent);
	--vis-accent-text: var(--vis-white);
}

/* Bei geöffnetem Mega-Menü wird der transparente Header solide — sonst
   stünde die Navigation auf der Panel-Kante. */
.visaro-header-transparent .vis-header.has-open-panel:not(.is-scrolled) {
	background: var(--vis-bg);
	border-block-end-color: var(--vis-border-subtle);

	--vis-text: var(--vis-ink-950);
	--vis-text-2: var(--vis-ink-600);
	--vis-text-3: var(--vis-ink-500);
	--vis-border: var(--vis-ink-200);
	--vis-border-strong: var(--vis-ink-300);
	--vis-accent-text: var(--vis-purple-600);
}

/* Logo-Varianten kreuzblenden statt nachladen. */
.vis-header__logo-dark,
.vis-header__logo-light {
	transition: opacity var(--vis-duration-ui) var(--vis-ease-inout);
}

.vis-header__logo-light { display: none; }

.visaro-header-transparent .vis-header:not(.is-scrolled):not(.has-open-panel) .vis-header__logo-dark { display: none; }
.visaro-header-transparent .vis-header:not(.is-scrolled):not(.has-open-panel) .vis-header__logo-light { display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   MARKE
   ══════════════════════════════════════════════════════════════════════════ */

.vis-header__brand {
	display: inline-flex;
	align-items: center;
	/* Schutzraum laut Corporate Design: Höhe des V auf allen Seiten. */
	padding-inline-end: var(--vis-space-6);
	color: inherit;
	text-decoration: none;
}

.vis-header__brand img {
	block-size: var(--vis-logo-height);
	inline-size: auto;
	transition: block-size var(--vis-duration-ui) var(--vis-ease-inout);
}

.vis-header.is-scrolled .vis-header__brand img { block-size: var(--vis-logo-height-scrolled); }

/* ══════════════════════════════════════════════════════════════════════════
   HAUPTNAVIGATION
   ══════════════════════════════════════════════════════════════════════════ */

.vis-nav {
	display: none; /* erst ab dem Desktop-Breakpoint, siehe unten */
}

.vis-nav__list {
	display: flex;
	align-items: center;
	gap: var(--vis-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Navigationspunkt — Link und Mega-Menü-Auslöser sehen gleich aus.
   Die Pill-Fläche ist der subtile aktive Zustand aus der Referenz:
   getönt, nicht bunt, nicht rund wie eine SaaS-Kapsel. */
.vis-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-2);

	min-block-size: var(--vis-tap-target-min);
	padding-inline: var(--vis-space-4);
	padding-block: var(--vis-space-2);

	border: 0;
	border-radius: var(--vis-radius-sm);
	background: transparent;

	color: var(--vis-text);
	font-family: var(--vis-font-sans);
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-medium);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;

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

/* Hover: deutlich sichtbare Pill. Ink-100 statt Surface — Surface war auf
   Weiß praktisch unsichtbar. Der Text wird zugleich voll schwarz. */
.vis-nav__link:hover {
	background: var(--vis-ink-100);
	color: var(--vis-ink-950);
}

.visaro-header-transparent .vis-header:not(.is-scrolled):not(.has-open-panel) .vis-nav__link:hover {
	background: color-mix(in srgb, var(--vis-white) 20%, transparent);
	color: var(--vis-white);
}

.vis-nav__link:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-accent);
	outline-offset: var(--vis-focus-offset);
	background: var(--vis-ink-100);
}

.vis-nav__link:active { background: var(--vis-ink-200); }

/* Geöffnetes Mega-Menü: kräftiger als Hover, damit erkennbar ist, welches
   Panel offen steht. Die Schriftstärke ändert sich dabei NICHT — sonst
   würde der Punkt breiter und die Navigation verschöbe sich. */
.vis-nav__link[aria-expanded="true"] {
	background: var(--vis-ink-950);
	color: var(--vis-white);
}

.vis-nav__link[aria-expanded="true"]:hover {
	background: var(--vis-ink-800);
	color: var(--vis-white);
}

.visaro-header-transparent .vis-header:not(.is-scrolled) .vis-nav__link[aria-expanded="true"] {
	background: var(--vis-ink-950);
	color: var(--vis-white);
}

/* Aktive Seite: dauerhaft markiert, aber ruhiger als das offene Panel.
   Der Akzentstrich liegt innerhalb der Pill, damit er weder aus dem
   Header herausragt noch beim Scrollen abgeschnitten wird. Die Fettung
   ist ein Dauerzustand und verschiebt daher nichts. */
.vis-nav__link.is-current {
	background: var(--vis-ink-100);
	color: var(--vis-ink-950);
	font-weight: var(--vis-fw-bold);
}

.vis-nav__link.is-current::after {
	content: "";
	position: absolute;
	inset-block-end: var(--vis-space-1);
	inset-inline: var(--vis-space-4);
	block-size: var(--vis-border-width-strong);
	border-radius: var(--vis-radius-full);
	background: var(--vis-accent);
}

.vis-nav__link.is-current:hover { background: var(--vis-ink-200); }

/* Offenes Panel schlägt „aktive Seite" — sonst konkurrieren zwei
   Markierungen um dieselbe Aussage. */
.vis-nav__link.is-current[aria-expanded="true"]::after { background: var(--vis-white); }

/* Ohne Ziel: strukturiert sichtbar, aber nicht klickbar — und bewusst
   ohne jede Hover-Reaktion, damit niemand einen Klick erwartet. */
.vis-nav__link.is-pending {
	cursor: default;
	color: var(--vis-text-3);
}

.vis-nav__link.is-pending:hover,
.vis-nav__link.is-pending:active {
	background: transparent;
	color: var(--vis-text-3);
}

.vis-nav__chevron {
	inline-size: var(--vis-space-4);
	block-size: var(--vis-space-4);
	color: var(--vis-text-3);
	transition:
		transform var(--vis-duration-ui) var(--vis-ease-out),
		color var(--vis-duration-ui) var(--vis-ease-out);
}

/* Beim Hover und im offenen Zustand nimmt der Pfeil die Textfarbe an —
   sonst bliebe er auf der dunklen Pill unsichtbar. */
.vis-nav__link:hover .vis-nav__chevron { color: currentColor; }

.vis-nav__link[aria-expanded="true"] .vis-nav__chevron {
	transform: rotate(180deg);
	color: currentColor;
}

/* ══════════════════════════════════════════════════════════════════════════
   RECHTER CLUSTER
   Kundenbereich (Textlink mit Icon) und Projekt starten (Primärbutton).
   Hier steht niemals ein Warenkorb.
   ══════════════════════════════════════════════════════════════════════════ */

.vis-header__actions {
	display: none; /* mobil ersetzt durch die Mobile-Leiste */
	align-items: center;
	gap: var(--vis-space-4);
}

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

	min-block-size: var(--vis-tap-target-min);
	padding-inline: var(--vis-space-3);
	border-radius: var(--vis-radius-sm);

	color: var(--vis-text);
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-medium);
	text-decoration: none;
	white-space: nowrap;

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

/* Gleiche Pill wie die Navigation — der Kundenbereich ist ein
   vollwertiges Ziel und darf sich nicht schwächer anfühlen. */
.vis-header__portal:hover {
	background: var(--vis-ink-100);
	color: var(--vis-ink-950);
}

.vis-header__portal:hover .vis-icon { color: var(--vis-accent); }

.vis-header__portal:active { background: var(--vis-ink-200); }

.visaro-header-transparent .vis-header:not(.is-scrolled):not(.has-open-panel) .vis-header__portal:hover {
	background: color-mix(in srgb, var(--vis-white) 20%, transparent);
	color: var(--vis-white);
}

.visaro-header-transparent .vis-header:not(.is-scrolled):not(.has-open-panel) .vis-header__portal:hover .vis-icon {
	color: var(--vis-white);
}

.vis-header__portal:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-accent);
	outline-offset: var(--vis-focus-offset);
	background: var(--vis-ink-100);
}

.vis-header__portal .vis-icon {
	inline-size: var(--vis-space-5);
	block-size: var(--vis-space-5);
	color: var(--vis-text-3);
	transition: color var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-header__portal.is-pending { cursor: default; color: var(--vis-text-3); }

.vis-header__portal.is-pending:hover,
.vis-header__portal.is-pending:active {
	background: transparent;
	color: var(--vis-text-3);
}

.vis-header__portal.is-pending:hover .vis-icon { color: var(--vis-text-3); }

/* Der eine Purple-Button im Header. Kompakt, nicht dominant. */
.vis-header__cta {
	min-block-size: var(--vis-tap-target-min);
	padding-inline: var(--vis-space-5);
	font-size: var(--vis-fs-body-s);
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE LEISTE
   Burger links · Logo optisch mittig · Kundenbereich rechts.
   Kein Warenkorb, kein Shopkonto, keine Suche.
   ══════════════════════════════════════════════════════════════════════════ */

.vis-header__mobile {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--vis-space-3);
	inline-size: 100%;
}

.vis-header__mobile-start { justify-self: start; }
.vis-header__mobile-end   { justify-self: end; justify-content: flex-end; }

/* Optische Mitte: Burger und Utility sind gleich breit, dadurch sitzt das
   Logo tatsächlich mittig und nicht nur rechnerisch. */
.vis-header__mobile-start,
.vis-header__mobile-end {
	display: flex;
	align-items: center;
	min-inline-size: var(--vis-tap-target-min);
}

.vis-header__mobile-brand {
	justify-self: center;
	display: inline-flex;
	align-items: center;
}

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

/* Burger — drei Linien, animiert zum × */
.vis-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;

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

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

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

.vis-burger:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-accent);
	outline-offset: var(--vis-focus-offset);
	background: var(--vis-ink-100);
}

.vis-burger__box {
	position: relative;
	inline-size: var(--vis-burger-width);
	block-size: var(--vis-burger-height);
}

.vis-burger__line {
	position: absolute;
	inset-inline: 0;
	block-size: var(--vis-burger-line);
	border-radius: var(--vis-radius-full);
	background: currentColor;
	transition:
		transform var(--vis-duration-ui) var(--vis-ease-inout),
		opacity var(--vis-duration-micro) var(--vis-ease-inout);
}

.vis-burger__line:nth-child(1) { inset-block-start: 0; }
.vis-burger__line:nth-child(2) { inset-block-start: var(--vis-burger-gap); }
.vis-burger__line:nth-child(3) { inset-block-start: calc(var(--vis-burger-gap) * 2); }

.vis-burger[aria-expanded="true"] .vis-burger__line:nth-child(1) { transform: translateY(var(--vis-burger-gap)) rotate(45deg); }
.vis-burger[aria-expanded="true"] .vis-burger__line:nth-child(2) { opacity: 0; }
.vis-burger[aria-expanded="true"] .vis-burger__line:nth-child(3) { transform: translateY(calc(var(--vis-burger-gap) * -1)) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════════════════════
   UMSCHALTPUNKT
   Nicht 768: Mit fünf deutschen Labels plus Kundenbereich plus CTA wird es
   dort zu eng. Ab 1100 px steht die Desktop-Navigation komfortabel, darunter
   greift der Drawer — das Tablet bekommt bewusst die mobile Navigation.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1100px) {
	.vis-nav { display: block; justify-self: start; }
	.vis-header__actions { display: flex; }
	.vis-header__mobile { display: none; }
}

@media (max-width: 1099.98px) {
	.vis-header__inner { grid-template-columns: 1fr; }

	/* Die Desktop-Marke muss hier **ausdrücklich** weg.

	   `.vis-nav` und `.vis-header__actions` stehen von Haus aus auf
	   `display: none` und werden erst ab 1100 px eingeschaltet — die Marke
	   nicht. Sie blieb damit unterhalb des Umschaltpunkts stehen, und weil
	   der Innenraum dort einspaltig ist, landete sie als **eigene Zeile
	   über** der mobilen Leiste: zwei Logos untereinander, und der Inhalt
	   lief von 0 bis 96 px in einem Kopf, der 65 px hoch ist. Gemessen bei
	   375, 390, 400, 430 und 768 px — überall dasselbe.

	   Das war die Ursache für praktisch alle gemeldeten Kopf-Symptome:
	   doppeltes Logo, überlagerte Inhalte, falsch sitzende Elemente und
	   ein Kopf, der in den Seiteninhalt ragte. */
	.vis-header__brand { display: none; }
}

/* Abstand zwischen Logo und Navigation (Design Concept Kap. 14.3). */
@media (min-width: 1100px) {
	.vis-nav { margin-inline-start: var(--vis-space-6); }
}

@media (min-width: 1280px) {
	.vis-nav__list { gap: var(--vis-space-2); }
	.vis-nav { margin-inline-start: var(--vis-space-10); }
}

/* ══════════════════════════════════════════════════════════════════════════
   ABSTANDHALTER
   Der transparente Header liegt fixiert über dem Inhalt. Damit die Seite
   nicht darunter beginnt, gleicht dieser Abstandhalter die Höhe aus —
   ohne Layout-Shift beim Umschalten.
   ══════════════════════════════════════════════════════════════════════════ */

.visaro-header-transparent .vis-header-spacer { display: none; }
.vis-header-spacer { display: none; }