/* Menü auf Tablet und Handy: Panel gleitet von rechts herein, „Leistungen“ klappt weich auf. */

@media (max-width: 960px) {
	.menue-knopf {
		display: block;
	}

	.kopf__anruf {
		display: inline-flex;
	}

	.marke__text {
		font-size: 0.95rem;
	}

	.menue {
		position: fixed;
		inset: 0 0 0 auto;
		z-index: 110;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		gap: 24px;
		width: min(400px, 88vw);
		padding: calc(var(--kopf-hoehe) + 16px) 24px 32px;
		overflow-y: auto;
		background: var(--papier-hell);
		box-shadow: -24px 0 48px rgba(44, 43, 42, 0.18);
		transform: translateX(105%);
		visibility: hidden;
		transition: transform 0.5s var(--weich), visibility 0s 0.5s;
	}

	.menue-offen .menue {
		transform: none;
		visibility: visible;
		transition: transform 0.5s var(--weich), visibility 0s;
	}

	.menue-offen::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 90;
		background: rgba(44, 43, 42, 0.35);
		animation: abdunkeln 0.4s both;
	}

	@keyframes abdunkeln {
		from {
			opacity: 0;
		}
	}

	.menue__liste {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	.menue__link {
		justify-content: space-between;
		width: 100%;
		padding: 14px 16px;
		border-radius: 12px;
		font-size: 1.1rem;
	}

	.menue__punkt {
		opacity: 0;
		transform: translateX(24px);
		transition: opacity 0.3s, transform 0.45s var(--weich);
	}

	.menue-offen .menue__punkt {
		opacity: 1;
		transform: none;
	}

	.menue-offen .menue__punkt:nth-child(2) { transition-delay: 0.05s; }
	.menue-offen .menue__punkt:nth-child(3) { transition-delay: 0.1s; }
	.menue-offen .menue__punkt:nth-child(4) { transition-delay: 0.15s; }
	.menue-offen .menue__punkt:nth-child(5) { transition-delay: 0.2s; }

	.untermenue {
		position: static;
		width: auto;
		max-height: 0;
		padding: 0 0 0 8px;
		overflow: hidden;
		box-shadow: none;
		background: none;
		clip-path: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: max-height 0.5s var(--weich);
	}

	.ist-offen > .untermenue {
		max-height: 640px;
		clip-path: none;
	}

	.menue__telefon {
		justify-content: center;
	}
}

@media (max-width: 560px) {
	.kopf__anruf {
		width: 48px;
		padding: 0;
		justify-content: center;
	}

	.kopf__anruf span {
		display: none;
	}
}