/* =========================================================================
   Kopfbereich (Vorlage „Kopfbereich“, Post 73)
   Gestaltung nach kfz-biesterfeldt.vercel.app, Logo von new.
   Maße am 13.10.2026 bei Vercel gemessen.

   ab 1360 px   Menü in der Zeile, Leistungen-Feld beim Überfahren
   bis 1359 px  Menü-Knopf, Liste klappt unter dem Kopf auf
   bis  959 px  Kopf 64 px hoch, Anrufleiste am unteren Rand
   bis  479 px  Menü-Knopf nur mit Symbol

   Farben kommen aus den Elementor-Variablen (var(--blue-700) …),
   die übrigen Werte stehen hier als eigene Tokens.
   ========================================================================= */

:root {
	--shadow-lg: 0 4px 8px #03183d0d, 0 24px 56px -16px #03183d4d;
	--shadow-action: 0 8px 20px -8px #0a5ac499;
	--shadow-action-hover: 0 12px 26px -8px #053b8c99;
	--shadow-header: 0 1px 0 #d9e0ea, 0 8px 24px -16px #03183d40;
	--blur-header: saturate(1.6) blur(12px);
	--dur-fast: .16s;
	--dur-base: .24s;
	--ease-standard: cubic-bezier(.2, 0, 0, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--focus-ring: #1c6ad0;
	--gradient-band: linear-gradient(118deg, #0a5ac4 0%, #0349ae 48%, #053b8c 100%);
	--pattern-blueprint: linear-gradient(#ffffff0f 1px, transparent 1px), linear-gradient(90deg, #ffffff0f 1px, transparent 1px), linear-gradient(#ffffff14 1px, transparent 1px), linear-gradient(90deg, #ffffff14 1px, transparent 1px);
	--pattern-blueprint-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
	--kb-pfeil-rechts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ Mitlaufen */

/* clip statt hidden: sonst entsteht ein eigener Scrollbereich und sticky greift nicht */
body { overflow-x: clip; }

.elementor-location-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .elementor-location-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .elementor-location-header { top: 0; } }

.elementor-location-header .elementor-element-kopf {
	position: relative;
	transition: background-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
/* Klassen setzt kopfbereich.js: gescrollt oder Menü offen */
.elementor-location-header.ist-gescrollt .elementor-element-kopf,
.elementor-location-header.ist-offen .elementor-element-kopf {
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: var(--blur-header);
	backdrop-filter: var(--blur-header);
	box-shadow: var(--shadow-header);
}

/* ------------------------------------------------------ Knöpfe im Kopf */

/* Verlauf beginnt am Rand, sonst zeigt der durchsichtige Rahmen links das dunkle Ende */
.elementor-location-header .s-k-rr,
.elementor-location-header .s-k-ga,
.elementor-location-header .s-al-anfrage {
	border: 2px solid transparent;
	background-origin: border-box;
	background-size: 200% 100%;
	background-position: 0 0;
}
.elementor-location-header .s-k-rr,
.elementor-location-header .s-k-ga,
.elementor-location-header .s-al-anfrage,
.elementor-location-header .s-k-nr,
.elementor-location-header .s-k-ruf,
.elementor-location-header .s-al-hell,
.elementor-location-header .s-mm-tel,
.elementor-location-header .s-mm-kbtn {
	transition: background-position var(--dur-base) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.elementor-location-header .s-k-rr:hover,
.elementor-location-header .s-k-ga:hover,
.elementor-location-header .s-al-anfrage:hover {
	background-position: 100% 0;
	box-shadow: var(--shadow-action-hover);
}
.elementor-location-header .s-k-nr:hover,
.elementor-location-header .s-k-ruf:hover,
.elementor-location-header .s-al-hell:hover,
.elementor-location-header .s-mm-tel:hover {
	background-color: var(--blue-50);
	border-color: var(--blue-800);
}
.elementor-location-header .s-k-nr:active,
.elementor-location-header .s-k-ruf:active,
.elementor-location-header .s-al-hell:active,
.elementor-location-header .s-mm-tel:active { background-color: var(--blue-100); }
.elementor-location-header .s-k-rr:active,
.elementor-location-header .s-k-ga:active,
.elementor-location-header .s-al-anfrage:active,
.elementor-location-header .s-k-nr:active,
.elementor-location-header .s-k-ruf:active,
.elementor-location-header .s-al-hell:active,
.elementor-location-header .s-mm-tel:active,
.elementor-location-header .s-mm-kbtn:active { transform: translateY(1px); }

/* Bewegung beim Überfahren (Klassen setzt kopfbereich.js, Werte wie bei Vercel):
   Telefon wackelt 0,6 s gleichmäßig, andere Symbole wachsen 0,18 s auf 112 % und zurück */
.elementor-location-header .kb-klingeln {
	transform-origin: 50% 50%;
	animation: kb-klingeln .6s linear;
}
.elementor-location-header .kb-hupfen { animation: kb-hupfen .36s; }
@keyframes kb-klingeln {
	0% { transform: rotate(0); }
	16.667% { transform: rotate(-14deg); }
	33.333% { transform: rotate(12deg); }
	50% { transform: rotate(-9deg); }
	66.667% { transform: rotate(6deg); }
	83.333% { transform: rotate(-3deg); }
	100% { transform: rotate(0); }
}
@keyframes kb-hupfen {
	0% { transform: scale(1); animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
	50% { transform: scale(1.12); animation-timing-function: cubic-bezier(.32, 0, .67, 0); }
	100% { transform: scale(1); }
}

/* Fokus nur bei Tastaturbedienung sichtbar, dann deutlich */
.elementor-location-header a:focus:not(:focus-visible),
.elementor-location-header button:focus:not(:focus-visible) { outline: none; }
.elementor-location-header a:focus-visible,
.elementor-location-header button:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 3px;
}
.elementor-location-header .s-mm-karte a:focus-visible { outline-color: #fff; }

/* Rufnummer als Pille passt neben dem breiten Logo erst ab 1800 px (dann bleiben
   zwischen den Menüpunkten wie bei Vercel mindestens 16 px). Darunter bleibt der
   runde Telefonknopf; beide rufen dieselbe Nummer an. */
@media (min-width: 1600px) and (max-width: 1799px) {
	.elementor-location-header .s-k-nr { display: none; }
	.elementor-location-header .s-k-ruf { display: flex; }
}

/* ------------------------------------------- Menü: alle Breiten gemeinsam */

.elementor-location-header .elementor-element.elementor-element-k-menue {
	--n-menu-title-transition: var(--dur-fast);
	--n-menu-dropdown-indicator-rotate: none;
	--n-menu-dropdown-icon-gap: 2px;
	--n-menu-dropdown-indicator-size: 18px;
}
/* Astra gibt jedem button einen leichten Schatten */
.elementor-location-header .elementor-element-k-menue .e-n-menu-dropdown-icon,
.elementor-location-header .elementor-element-k-menue .e-n-menu-toggle { box-shadow: none; }
.elementor-location-header .elementor-element-k-menue .e-n-menu-dropdown-icon {
	width: 30px;
	border-radius: 6px;
	color: var(--blue-700);
	transition: background-color var(--dur-fast) var(--ease-standard);
}
.elementor-location-header .elementor-element-k-menue .e-n-menu-dropdown-icon:hover { background-color: var(--blue-50); }
/* Die Pfeile sind Linien-Symbole: Elementor würde sie mit fill zu Dreiecken füllen */
.elementor-location-header .elementor-element-k-menue .e-n-menu-dropdown-icon svg,
.elementor-location-header .elementor-element-k-menue .e-n-menu-toggle svg {
	fill: none !important;
	stroke: currentColor;
}
.elementor-location-header .elementor-element-k-menue .e-n-menu-dropdown-icon svg { transition: transform var(--dur-base) var(--ease-out); }
.elementor-location-header .elementor-element-k-menue .e-n-menu-dropdown-icon[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Weißer Kasten von Elementor hinter dem gerundeten Feld weg. Elementors Menü-Skript
   schiebt den Inhalt außerdem per style-Attribut zur Seite (left: …px), die Lage
   bestimmt hier aber kopfbereich.js – deshalb !important. */
.elementor-location-header .elementor-element-m-leist-c {
	background: transparent;
	left: 0 !important;
}
/* Elementor gibt jedem Container im Aufklappinhalt mindestens 150 px Breite
   (eigentlich nur für die Ablagefläche im Editor gedacht). */
.elementor-location-header .elementor-element-k-menue .e-n-menu-content [data-element_type="e-flexbox"] { min-width: 0; }

/* ---------------------------------------------------- ab 1360 px: Zeile */

@media (min-width: 1360px) {
	.elementor-location-header .s-kopf { gap: clamp(16px, calc(10vw - 120px), 24px); }

	/* Der Menübereich wächst mit (so bleiben die Knöpfe auch auf breiten Bildschirmen
	   40 px vor dem rechten Rand), die Menüpunkte selbst verteilen sich auf höchstens 784 px. */
	.elementor-location-header .s-k-nav {
		flex: 1 1 auto;
		margin-inline-start: clamp(16px, min(3vw, calc(25vw - 324px)), 56px);
	}
	.elementor-location-header .elementor-element-k-menue { width: 100%; }
	/* Grenze auf der Liste: am Widget überschreibt Elementor max-width mit .elementor.elementor .e-con > .elementor-widget */
	.elementor-location-header .elementor-element-k-menue .e-n-menu-heading {
		max-width: 784px;
		flex-wrap: nowrap;
		justify-content: space-between;
		column-gap: 8px;
	}
	/* „Rückruf anfordern“ steht hier als Knopf rechts, im Menü nur in der Handy-Liste */
	.elementor-location-header .elementor-element-k-menue .e-n-menu-item:last-child { display: none; }

	/* Unterstrich kräftig blau, beim Überfahren und für die aktive Seite
	   (Auftraggeber 13.10.2026: kein Hellblau beim Überfahren, Vercel nimmt dort blue-300) */
	.elementor-location-header .elementor-element-k-menue .e-n-menu-title-container {
		position: relative;
		padding: 0 2px;
	}
	.elementor-location-header .elementor-element-k-menue .e-n-menu-title-container::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 3px;
		height: 3px;
		border-radius: 2px;
		background: var(--blue-600);
		transform: scaleX(0);
		transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-fast);
	}
	.elementor-location-header .elementor-element-k-menue .e-n-menu-title-container:hover::after { transform: scaleX(1); }
	.elementor-location-header .elementor-element-k-menue .e-n-menu-title.e-current > .e-n-menu-title-container::after {
		background: var(--blue-600);
		transform: scaleX(1);
	}
	/* !important nötig: Elementors Typografie-Regel hat neun Klassen */
	.elementor-location-header .elementor-element-k-menue .e-n-menu-title.e-current .e-n-menu-title-text { font-weight: 600 !important; }

	/* Leistungen-Feld: Bezugsrahmen ist der ganze Kopf, Lage setzt kopfbereich.js */
	.elementor-location-header .elementor-element-k-nav,
	.elementor-location-header .elementor-element-k-menue,
	.elementor-location-header .elementor-element-k-menue > .e-n-menu { position: static; }
	.elementor-location-header .elementor-element.elementor-element-k-menue { --n-menu-title-distance-from-content: 8px; }
	.elementor-location-header .elementor-element-k-menue > .e-n-menu:not([data-layout="dropdown"]) .e-n-menu-content {
		top: 100%;
		left: var(--kb-mm-links, 16px);
		right: auto;
		width: auto;
	}
	/* Brücke vom Menüpunkt bis zum Feld, damit es beim Hinfahren offen bleibt */
	.elementor-location-header .elementor-element-k-menue .e-n-menu-item:has(> .e-n-menu-content) > .e-n-menu-title::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		height: 22px;
	}
	.elementor-location-header .elementor-element-k-menue .e-n-menu-content > .e-con.e-active > .elementor-element-mm {
		animation: kb-einblenden var(--dur-base) var(--ease-out);
	}

	/* Inhalt des Felds wie bei Vercel: Eintrag hellt beim Überfahren auf, die Kachel wird
	   blau mit weißem Symbol, der Pfeil erscheint. Dasselbe gilt für die Leistung,
	   auf deren Seite man gerade ist (aria-current setzt kopfbereich.js). */
	.elementor-location-header .s-mm .mm-eintrag { transition: background-color var(--dur-fast) var(--ease-standard); }
	.elementor-location-header .s-mm .mm-eintrag:hover { background-color: var(--slate-50); }
	.elementor-location-header .s-mm .mm-kachel { transition: background-color var(--dur-fast); }
	.elementor-location-header .s-mm .mm-symbol { transition: filter var(--dur-fast); }
	.elementor-location-header .s-mm .mm-eintrag:hover .mm-kachel,
	.elementor-location-header .s-mm .mm-eintrag:focus-visible .mm-kachel,
	.elementor-location-header .s-mm .mm-eintrag[aria-current="page"] .mm-kachel { background-color: var(--blue-700); }
	.elementor-location-header .s-mm .mm-eintrag:hover .mm-symbol,
	.elementor-location-header .s-mm .mm-eintrag:focus-visible .mm-symbol,
	.elementor-location-header .s-mm .mm-eintrag[aria-current="page"] .mm-symbol { filter: brightness(0) invert(1); }

	/* Karte „Unfall gehabt?“: Blaupausen-Raster über schrägem Verlauf */
	.elementor-location-header .s-mm-karte {
		background-color: var(--blue-700);
		background-image: var(--pattern-blueprint), var(--gradient-band);
		background-size: var(--pattern-blueprint-size), 100% 100%;
	}
	.elementor-location-header .s-mm .mm-eintrag .mm-pfeil {
		opacity: 0;
		transform: translateX(-4px);
		transition: opacity var(--dur-fast), transform var(--dur-fast);
	}
	.elementor-location-header .s-mm .mm-eintrag:hover .mm-pfeil,
	.elementor-location-header .s-mm .mm-eintrag:focus-visible .mm-pfeil {
		opacity: 1;
		transform: none;
	}
}

@keyframes kb-einblenden {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

/* Pfeil im Knopf der Karte rückt beim Überfahren ein Stück nach rechts */
.elementor-location-header .s-mm-kbtn .mm-pfeil { transition: transform var(--dur-fast) var(--ease-out); }
.elementor-location-header .s-mm-kbtn:hover .mm-pfeil { transform: translateX(3px); }
.elementor-location-header .mm-link:hover .mm-linktext,
.elementor-location-header .mm-link:hover .s-mm-alle-t { text-decoration: underline; }
.elementor-location-header .s-mm-kbtn:hover .s-mm-kbtn-t { color: var(--navy-950); }

/* ----------------------------------------- bis 1359 px: Menü-Knopf und Liste */

@media (max-width: 1359px) {
	.elementor-location-header .elementor-element.elementor-element-k-menue {
		--n-menu-title-padding: 0 var(--gutter);
		--n-menu-dropdown-indicator-size: 22px;
	}

	/* Knopf: Symbol und „Menü“ wie bei Vercel */
	.elementor-location-header .elementor-element-k-menue .e-n-menu-toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 44px;
		padding: 0 14px 0 12px;
		border-radius: 8px;
		background: var(--blue-50);
		color: var(--navy-950);
		font-family: Archivo, sans-serif;
		font-size: 15px;
		font-weight: 600;
		line-height: 1;
		transition: background-color var(--dur-fast);
	}
	.elementor-location-header .elementor-element-k-menue .e-n-menu-toggle:hover { background: var(--blue-100); }
	.elementor-location-header .elementor-element-k-menue .e-n-menu-toggle::after { content: "Menü"; }
	.elementor-location-header .elementor-element-k-menue .e-n-menu-toggle .e-n-menu-toggle-icon {
		width: 22px;
		height: 22px;
		padding: 0;
		border-radius: 0;
		background: none !important;
	}
	.elementor-location-header .elementor-element-k-menue .e-n-menu-toggle .e-n-menu-toggle-icon.e-close {
		position: absolute;
		inset: auto;
		top: 11px;
		left: 12px;
	}
	.elementor-location-header .elementor-element-k-menue .e-n-menu-toggle svg {
		width: 22px;
		height: 22px;
		color: var(--navy-950);
	}

	/* Liste: volle Breite direkt unter dem Kopf */
	.elementor-location-header .elementor-element-k-nav,
	.elementor-location-header .elementor-element-k-menue,
	.elementor-location-header .elementor-element-k-menue > .e-n-menu { position: static; }
	.elementor-location-header .elementor-element-k-menue > .e-n-menu[data-layout="dropdown"] > .e-n-menu-wrapper {
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		margin: 0;
		background: var(--white);
		border: 0;
		border-top: 1px solid var(--slate-200);
		border-radius: 0;
		box-shadow: var(--shadow-lg);
		max-height: calc(100dvh - 88px);
		overflow-y: auto;
		overscroll-behavior: contain;
		animation: kb-einblenden var(--dur-base) var(--ease-out);
	}
	.elementor-location-header .elementor-element-k-menue .e-n-menu-heading {
		flex-direction: column;
		flex-wrap: nowrap;
	}
	.elementor-location-header .elementor-element-k-menue > .e-n-menu[data-layout="dropdown"] .e-n-menu-item { width: 100%; }

	/* Zeilen: 60 px, 20/600, Trennlinie, Pfeil rechts */
	.elementor-location-header .elementor-element-k-menue > .e-n-menu[data-layout="dropdown"] .e-n-menu-title {
		min-height: 60px;
		flex-wrap: nowrap;
		border-bottom: 1px solid var(--slate-200);
	}
	.elementor-location-header .elementor-element-k-menue > .e-n-menu[data-layout="dropdown"] .e-n-menu-title-container {
		flex: 1 1 auto;
		align-self: stretch;
		align-items: center;
		justify-content: space-between;
	}
	.elementor-location-header .elementor-element-k-menue .e-n-menu-title .e-n-menu-title-text { font-weight: 600 !important; }
	.elementor-location-header .elementor-element-k-menue > .e-n-menu[data-layout="dropdown"] .e-n-menu-title:not(:has(> .e-n-menu-dropdown-icon)) > .e-n-menu-title-container::after {
		content: "";
		flex: 0 0 22px;
		width: 22px;
		height: 22px;
		background-color: currentColor;
		-webkit-mask: var(--kb-pfeil-rechts) center / 22px no-repeat;
		mask: var(--kb-pfeil-rechts) center / 22px no-repeat;
	}
	.elementor-location-header .elementor-element-k-menue > .e-n-menu[data-layout="dropdown"] .e-n-menu-dropdown-icon {
		width: 44px;
		height: 44px;
		margin-inline-end: -11px;
	}

	/* Unterliste „Leistungen“: hellgrau, 48 px je Zeile, eingerückt */
	.elementor-location-header .elementor-element-k-menue > .e-n-menu[data-layout="dropdown"] .e-n-menu-content { width: 100%; }
	.elementor-location-header .elementor-element-k-menue > .e-n-menu[data-layout="dropdown"] .e-n-menu-content > .e-con {
		--width: 100%;
		width: 100%;
		margin-block-start: 0;
	}
	.elementor-location-header .s-mm {
		box-shadow: none;
		border-bottom: 1px solid var(--slate-200);
	}
	.elementor-location-header .s-mm .mm-eintrag,
	.elementor-location-header .s-mm .mm-link { padding: 0 var(--gutter) 0 calc(var(--gutter) + 14px); }
	/* „Alle Leistungen“ als ganze Zeile antippbar */
	.elementor-location-header .s-mm-unten { align-items: stretch; }
}

/* ------------------------------------------------- bis 959 px: Handy-Kopf */

@media (max-width: 959px) {
	.elementor-location-header .elementor-element-k-menue > .e-n-menu[data-layout="dropdown"] > .e-n-menu-wrapper {
		max-height: calc(100dvh - 64px);
		padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
	}

	/* Anrufleiste */
	.elementor-location-header .s-anrufleiste {
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		-webkit-backdrop-filter: var(--blur-header);
		backdrop-filter: var(--blur-header);
	}
	.elementor-location-header .s-al-hell,
	.elementor-location-header .s-al-anfrage { border-width: 2px; }
	body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
	/* Astras „Nach oben“-Knopf (unten 30 px) lag sonst auf „Anfrage“: über die Leiste schieben */
	#ast-scroll-top { bottom: calc(68px + 16px + env(safe-area-inset-bottom, 0px)); }
}

/* ----------------------------------------- bis 479 px: Knopf nur mit Symbol */

@media (max-width: 479px) {
	.elementor-location-header .elementor-element-k-menue .e-n-menu-toggle {
		width: 44px;
		padding: 0;
		justify-content: center;
	}
	.elementor-location-header .elementor-element-k-menue .e-n-menu-toggle::after { content: none; }
	.elementor-location-header .elementor-element-k-menue .e-n-menu-toggle .e-n-menu-toggle-icon.e-close { left: 11px; }
}

/* ------------------------------------------------------ weniger Bewegung */

@media (prefers-reduced-motion: reduce) {
	.elementor-location-header *,
	.elementor-location-header *::before,
	.elementor-location-header *::after {
		animation: none !important;
		transition: none !important;
	}
}