/*
 * ERS Bewegung
 * ============
 *
 * Letzte Stylesheet-Schicht nach design-line.css. Sie verfeinert nur
 * Bewegung und Hover-Rückmeldung; Farben, Abstände und Inhalte bleiben
 * unverändert.
 *
 * Leitlinie: ruhig und vorhersehbar.
 * - Weiche Ausklang-Kurven, keine Federeffekte, kein Blinken.
 * - Nur was klickbar ist, reagiert sichtbar auf den Mauszeiger.
 * - Hover-Effekte greifen nur auf echten Zeigergeräten; auf Touch bleibt
 *   kein Zustand hängen. Tastaturfokus erhält dieselbe Rückmeldung.
 * - „Bewegung reduzieren“ im Betriebssystem schaltet alles ab
 *   (Abschnitt 4 in design-line.css gilt auch für diese Datei).
 */

:root {
	--ers-ease-calm: cubic-bezier(0.25, 1, 0.5, 1);
	--ers-dur-calm: 520ms;
	--ers-shadow-lift: 0 5px 16px -7px rgba(0, 74, 173, 0.18), 0 1px 3px rgba(20, 45, 82, 0.06);
}

/* Hauptnavigation: ruhige Fläche statt wandernder Unterstreichung. */
.ers-header-nav .wp-block-navigation-item__content {
	border-radius: 7px;
	padding: 0.45rem 0.55rem;
	transition: color var(--ers-dur-hover) var(--ers-ease), background-color var(--ers-dur-hover) var(--ers-ease);
}
.ers-header-nav .wp-block-navigation-item__content::after {
	content: none;
	display: none;
}
.ers-header-nav .wp-block-navigation-item__content[aria-current="page"] {
	background: var(--ers-blue-soft, #E8F1FF);
	color: var(--ers-blue);
}
@media (hover: hover) and (pointer: fine) {
	.ers-header-nav .wp-block-navigation-item__content:hover {
		background: var(--ers-surface-strong, #F0F4F8);
		color: var(--ers-blue);
	}
}
.ers-header-nav .wp-block-navigation-item__content:focus-visible {
	background: var(--ers-surface-strong, #F0F4F8);
}

/* Mobil: ein klarer, gut erreichbarer Dialog ohne gestaffelte Einträge. */
.ers-menu-heading { display: none; }
@media (max-width: 760px) {
	.ers-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
	.ers-header-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-flex;
		width: 48px;
		height: 48px;
		border-radius: 10px;
		box-shadow: none;
		background: var(--ers-surface-strong, #F0F4F8);
	}
	.ers-header-nav .wp-block-navigation__responsive-container.is-menu-open {
		animation: ers-menu-appear 240ms var(--ers-ease);
		background: var(--ers-surface, #FAFBFC);
		padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
		overscroll-behavior: contain;
	}
	.ers-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		max-width: 480px;
		width: 100%;
		margin-inline: auto;
	}
	.ers-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		padding-top: 72px;
		position: relative;
	}
	.ers-header-nav .wp-block-navigation__responsive-container.is-menu-open .ers-menu-heading {
		display: block;
		position: absolute;
		top: 10px;
		left: 4px;
		margin: 0;
		font-size: 1.4rem;
		font-weight: 700;
		color: var(--ers-text);
	}
	.ers-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		top: 0;
		right: 0;
		width: 48px;
		height: 48px;
		border: 1px solid var(--ers-line);
		border-radius: 10px;
		background: var(--ers-white);
		color: var(--ers-blue);
	}
	.ers-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 0;
		align-items: stretch;
	}
	.ers-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 8px; }
	.ers-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { animation: none; }
	.ers-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		min-height: 56px;
		padding: 14px 16px;
		border: 1px solid var(--ers-line);
		border-radius: 10px;
		background: var(--ers-white);
		font-size: 1.08rem;
		white-space: normal;
		line-height: 1.4;
		gap: 12px;
		align-items: center;
		justify-content: space-between;
	}
	.ers-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
		background: var(--ers-blue-soft, #E8F1FF);
		border-color: var(--ers-blue);
	}
	.ers-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before {
		content: "›";
		order: 1;
		font-size: 1.35rem;
		color: var(--ers-blue);
	}
}
@keyframes ers-menu-appear { from { opacity: 0; } to { opacity: 1; } }

/* Geöffnetes Menü: Das X steht exakt an der Stelle des Burgers, die Spalte
 * nutzt die Ränder der Kopfzeile (Werte misst main.js beim Öffnen). Ohne
 * Messung greift die Grundaufstellung oben. */
@media (max-width: 760px) {
	.ers-header-nav .wp-block-navigation__responsive-container.is-menu-open[data-ers-menu-anchored] {
		padding-left: var(--ers-menu-left);
		padding-right: var(--ers-menu-right);
	}

	.ers-header-nav .wp-block-navigation__responsive-container.is-menu-open[data-ers-menu-anchored] .wp-block-navigation__responsive-close {
		max-width: none;
	}

	.ers-header-nav .wp-block-navigation__responsive-container.is-menu-open[data-ers-menu-anchored] .wp-block-navigation__responsive-dialog {
		padding-top: calc(var(--ers-menu-top) + 48px);
	}

	.ers-header-nav .wp-block-navigation__responsive-container.is-menu-open[data-ers-menu-anchored] .wp-block-navigation__responsive-container-close {
		left: auto;
		position: fixed;
		right: var(--ers-menu-right);
		top: var(--ers-menu-top);
	}

	.ers-header-nav .wp-block-navigation__responsive-container.is-menu-open[data-ers-menu-anchored] .ers-menu-heading {
		left: var(--ers-menu-left);
		position: fixed;
		top: calc(var(--ers-menu-top) + 24px);
		transform: translateY(-50%);
	}
}

/* Buttons: Farbe reagiert zügig, Anhebung und Schatten gleiten ruhig nach.
 * Das kurze Drücken (:active, 80 ms) aus design-line.css bleibt vorrangig. */
.wp-block-button__link,
.ers-cta,
a.ers-core-booking-cta,
.ers-static-button {
	transition:
		background-color var(--ers-dur-ui) var(--ers-ease),
		border-color var(--ers-dur-ui) var(--ers-ease),
		color var(--ers-dur-hover) var(--ers-ease),
		box-shadow var(--ers-dur-calm) var(--ers-ease-calm),
		transform var(--ers-dur-calm) var(--ers-ease-calm);
}

a.ers-core-booking-cta::after {
	transition:
		background-color var(--ers-dur-ui) var(--ers-ease),
		transform var(--ers-dur-calm) var(--ers-ease-calm);
}

/* ---------------------------------------------------------------------------
 * 2. Klickbare Karten: dezente Tiefe durch Kontur und Schatten
 * ------------------------------------------------------------------------- */

.ers-field-card,
.ers-quick-nav__grid a,
.ers-anchor-grid a,
.ers-career-card,
.ers-job-card {
	transition:
		background-color var(--ers-dur-ui) var(--ers-ease),
		border-color var(--ers-dur-ui) var(--ers-ease),
		color var(--ers-dur-hover) var(--ers-ease),
		box-shadow var(--ers-dur-calm) var(--ers-ease-calm),
		transform var(--ers-dur-calm) var(--ers-ease-calm);
}

.ers-field-card .ers-field-card__art {
	transition:
		transform var(--ers-dur-calm) var(--ers-ease-calm),
		opacity var(--ers-dur-calm) var(--ers-ease-calm);
}

@media (hover: hover) and (pointer: fine) {
	.ers-field-card:hover,
	.ers-quick-nav__grid a:hover,
	.ers-anchor-grid a:hover,
	.ers-career-card:hover,
	.ers-job-card:hover {
		box-shadow: var(--ers-shadow-lift);
	}

	.ers-field-card:hover .ers-field-card__art {
		opacity: 1;
		transform: none;
	}
}

.ers-field-card:focus-visible,
.ers-quick-nav__grid a:focus-visible,
.ers-anchor-grid a:focus-visible,
.ers-career-card:focus-visible,
.ers-job-card:focus-visible {
	box-shadow: var(--ers-shadow-lift);
}

.ers-field-card:focus-visible .ers-field-card__art {
	opacity: 1;
	transform: none;
}

/* Nach dem Einblenden (Klasse aus main.js): Die Staffelverzögerung entfällt,
 * Hover-Übergänge laufen wieder weich, und die Anhebung wird nicht mehr vom
 * Endzustand des Einblendens überdeckt. */
.ers-js-ready .ers-reveal.is-visible .ers-reveal-child.ers-reveal-done {
	transition:
		opacity var(--ers-dur-reveal) var(--ers-ease-soft),
		background-color var(--ers-dur-ui) var(--ers-ease),
		border-color var(--ers-dur-ui) var(--ers-ease),
		color var(--ers-dur-hover) var(--ers-ease),
		box-shadow var(--ers-dur-calm) var(--ers-ease-calm),
		transform var(--ers-dur-calm) var(--ers-ease-calm);
	transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
	.ers-js-ready .ers-reveal.is-visible .ers-reveal-done:is(.ers-field-card, .ers-quick-nav__grid a, .ers-anchor-grid a, .ers-career-card, .ers-job-card):hover {
		transform: translateY(var(--ers-lift));
	}
}

.ers-js-ready .ers-reveal.is-visible .ers-reveal-done:is(.ers-field-card, .ers-quick-nav__grid a, .ers-anchor-grid a, .ers-career-card, .ers-job-card):focus-visible {
	transform: translateY(var(--ers-lift));
}

/* Weiter-Pfeile gleiten ein Stück mit, wenn der Link oder seine Karte
 * angesteuert wird. */
.ers-card-link::after {
	transition: transform var(--ers-dur-calm) var(--ers-ease-calm);
}

.ers-card-link:hover::after,
.ers-card-link:focus-visible::after,
.ers-field-card:hover .ers-card-link::after,
.ers-field-card:focus-visible .ers-card-link::after {
	transform: translateX(1px);
}

/* ---------------------------------------------------------------------------
 * 3. Textlinks: feste Unterstreichung, ruhiger Farbwechsel
 * ------------------------------------------------------------------------- */

.ers-main a:not([class]),
.ers-page a:not([class]),
.ers-site-footer a {
	text-underline-offset: 0.18em;
	transition:
		color var(--ers-dur-hover) var(--ers-ease),
		text-decoration-color var(--ers-dur-hover) var(--ers-ease);
}

/* Fotos bleiben unbewegt. Nur neu geladene Bilder werden weich sichtbar. */
.ers-img-fade { transition: opacity 700ms var(--ers-ease-calm); }
.ers-img-fade.ers-img-pending { opacity: 0; }

/* ---------------------------------------------------------------------------
 * 5. Aufklappbare Fragen: weiches Öffnen, Plus dreht sich zum Minus
 * ------------------------------------------------------------------------- */

.ers-faq__item {
	transition: border-color var(--ers-dur-ui) var(--ers-ease), box-shadow var(--ers-dur-calm) var(--ers-ease-calm);
}

.ers-faq__item summary {
	transition: color var(--ers-dur-hover) var(--ers-ease);
}

.ers-faq__item summary::after,
.ers-faq__item[open] summary::after {
	background:
		linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
	background-color: transparent;
	border-radius: 999px;
	content: "";
	height: 28px;
	right: 0.65rem;
	margin-top: -14px;
	top: 50%;
	transition:
		transform var(--ers-dur-calm) var(--ers-ease-calm),
		background-size var(--ers-dur-calm) var(--ers-ease-calm),
		background-color var(--ers-dur-ui) var(--ers-ease);
	width: 28px;
}

.ers-faq__item[open] summary::after {
	background-size: 12px 2px, 2px 0;
	transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
	.ers-faq__item:hover {
		border-color: rgba(0, 74, 173, 0.34);
	}

	.ers-faq__item summary:hover {
		color: var(--ers-blue);
	}

	.ers-faq__item summary:hover::after {
		background-color: var(--ers-blue-soft, #E8F1FF);
	}
}

.ers-faq__item summary:focus-visible::after {
	background-color: var(--ers-blue-soft, #E8F1FF);
}

/* Inhalt blendet beim Öffnen weich ein; Browser mit ::details-content
 * animieren zusätzlich die Höhe. Ohne Unterstützung öffnet es wie bisher. */
.ers-faq__item[open] > :not(summary),
.ers-signal-panel[open] > :not(summary) {
	animation: ers-details-in var(--ers-dur-calm) var(--ers-ease-calm) both;
}

@keyframes ers-details-in {
	from {
		opacity: 0;
		transform: none;
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@supports selector(::details-content) {
	.ers-faq__item,
	.ers-signal-panel {
		interpolate-size: allow-keywords;
	}

	.ers-faq__item::details-content,
	.ers-signal-panel::details-content {
		block-size: 0;
		overflow: clip;
		transition:
			block-size var(--ers-dur-calm) var(--ers-ease-calm),
			content-visibility var(--ers-dur-calm) allow-discrete;
	}

	.ers-faq__item[open]::details-content,
	.ers-signal-panel[open]::details-content {
		block-size: auto;
	}
}

/* ---------------------------------------------------------------------------
 * 6. Titelbereich der Startseite
 * ------------------------------------------------------------------------- *
 * Der Einstieg läuft im ruhigen Einblend-Tempo; danach steht alles ruhig.
 */

.ers-js-ready .ers-hero .ers-hero__content > *,
.ers-js-ready .ers-hero .ers-hero-visual {
	transition:
		opacity var(--ers-dur-reveal) var(--ers-ease-soft),
		transform var(--ers-dur-reveal) var(--ers-ease-soft);
}

/* ---------------------------------------------------------------------------
 * 6a. „Ihr Weg durch die Praxis“
 * ------------------------------------------------------------------------- *
 * Die vier Schritte erscheinen nacheinander (Staffelung aus main.js). Die
 * Verbindungslinie blendet erst danach weich ein und zeigt so den Ablauf;
 * sie fährt bewusst nicht ein, sondern wird nur sichtbar.
 */

.ers-js-ready .ers-patient-journey.ers-reveal .ers-patient-journey__steps::before {
	opacity: 0;
	transition: opacity 900ms var(--ers-ease-calm);
}

.ers-js-ready .ers-patient-journey.ers-reveal.is-visible .ers-patient-journey__steps::before {
	opacity: 1;
	transition-delay: calc(4 * var(--ers-stagger) + 200ms);
}

/* ---------------------------------------------------------------------------
 * 6b. Kopfzeile auf dem Handy
 * ------------------------------------------------------------------------- *
 * main.js setzt .ers-header-shell (nicht bei „Bewegung reduzieren“). Die
 * Kopfzeile bleibt oben erreichbar, gleitet beim Weiterlesen nach unten weg
 * und kehrt beim Hochscrollen zurück. Im Ruhezustand steht bewusst kein
 * transform, damit das Menü-Overlay (position: fixed) den Bildschirm füllt.
 */

@media (max-width: 760px) {
	.ers-js-ready .ers-header-shell {
		position: sticky;
		top: 0;
		transition: transform 380ms var(--ers-ease-calm);
		z-index: 60;
	}

	.ers-js-ready .ers-header-shell > .ers-site-header {
		position: relative;
	}

	.ers-js-ready .ers-header-shell.is-tucked {
		transform: translateY(calc(-100% - 2px));
	}
}

/* ---------------------------------------------------------------------------
 * 6c. Zum Seitenanfang
 * ------------------------------------------------------------------------- *
 * Mit JavaScript wird der Footer-Link zu einem kleinen, schwebenden Pfeil
 * unten rechts. Er erscheint weich, sobald das obere Drittel verlassen ist
 * (Klasse aus main.js), und verschwindet im oberen Drittel wieder. Hell mit
 * blauem Pfeil, damit er auf weißen Flächen wie auf dem blauen Footer
 * gleich gut sichtbar ist. Unsichtbar ist er auch nicht per Tab erreichbar.
 */

.ers-js-ready .ers-site-footer .ers-footer-back-to-top {
	align-items: center;
	align-self: auto;
	background: rgba(255, 255, 255, 0.97);
	border: 1px solid var(--ers-line);
	border-radius: 999px;
	bottom: max(16px, env(safe-area-inset-bottom));
	box-shadow: 0 8px 20px -10px rgba(20, 45, 82, 0.45), 0 1px 3px rgba(20, 45, 82, 0.08);
	box-sizing: border-box;
	color: var(--ers-blue) !important;
	display: inline-flex;
	font-size: 0;
	height: 48px;
	justify-content: center;
	line-height: 0;
	min-height: 48px;
	opacity: 0;
	padding: 0;
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	text-decoration: none;
	transform: translateY(10px);
	transition:
		opacity var(--ers-dur-calm) var(--ers-ease-calm),
		transform var(--ers-dur-calm) var(--ers-ease-calm),
		visibility 0s linear var(--ers-dur-calm),
		background-color var(--ers-dur-ui) var(--ers-ease),
		border-color var(--ers-dur-ui) var(--ers-ease),
		box-shadow var(--ers-dur-calm) var(--ers-ease-calm);
	visibility: hidden;
	width: 48px;
	z-index: 55;
}

.ers-js-ready .ers-site-footer .ers-footer-back-to-top::before {
	background: currentColor;
	content: "";
	height: 20px;
	-webkit-mask: url(../img/icons/single/weiter.svg) center / contain no-repeat;
	mask: url(../img/icons/single/weiter.svg) center / contain no-repeat;
	transform: rotate(-90deg);
	transition: transform var(--ers-dur-calm) var(--ers-ease-calm);
	width: 20px;
}

.ers-js-ready .ers-site-footer .ers-footer-back-to-top.is-visible {
	opacity: 1;
	transform: none;
	transition-delay: 0s;
	visibility: visible;
}

@media (hover: hover) and (pointer: fine) {
	.ers-js-ready .ers-site-footer .ers-footer-back-to-top.is-visible:hover {
		background: #F3F8FF;
		border-color: rgba(0, 74, 173, 0.35);
		box-shadow: 0 12px 26px -12px rgba(20, 45, 82, 0.5), 0 1px 3px rgba(20, 45, 82, 0.08);
	}

	.ers-js-ready .ers-site-footer .ers-footer-back-to-top:hover::before {
		transform: translateY(-2px) rotate(-90deg);
	}
}

/* Blauer Ring mit weißem Abstand: sichtbar auf Weiß und auf dem Footer-Blau. */
.ers-js-ready .ers-site-footer .ers-footer-back-to-top:focus-visible {
	box-shadow: 0 0 0 2px #FFFFFF;
	outline: 2px solid var(--ers-blue);
	outline-offset: 2px;
}

.ers-js-ready .ers-site-footer .ers-footer-back-to-top:focus-visible::before {
	transform: translateY(-2px) rotate(-90deg);
}

/* Freie Landefläche am Seitenende, damit der Pfeil im Footer nichts verdeckt. */
@media (max-width: 760px) {
	.ers-js-ready .ers-footer-actions {
		padding-bottom: 60px !important;
	}
}

/* ---------------------------------------------------------------------------
 * 6d. Heller Buchungsbutton auf blauen Flächen
 * ------------------------------------------------------------------------- *
 * Im Footer und auf der blauen Kontaktkarte: weiß mit blauer Schrift, damit
 * der wichtigste Weg nicht blau auf blau verschwindet. Der Pfeilkreis ist
 * hellblau statt weiß auf weiß. Hover wie bei den übrigen Buttons: leichte
 * Anhebung (design-line.css), weicher Schatten, Pfeil gleitet ein Stück.
 */

.ers-site-footer .ers-footer-actions a.ers-core-booking-cta,
.ers-page--contact .ers-contact-routes > .ers-card:first-child a.ers-core-booking-cta {
	background: #FFFFFF;
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 1px 2px rgba(0, 24, 64, 0.12);
	color: var(--ers-blue);
}

/* Beide Footer-Aktionen gleich breit, damit sie als Paar ruhig wirken. */
.ers-site-footer .ers-footer-actions :is(a.ers-core-booking-cta, .ers-card-link) {
	width: 100%;
}

.ers-site-footer .ers-footer-actions a.ers-core-booking-cta::after,
.ers-page--contact .ers-contact-routes > .ers-card:first-child a.ers-core-booking-cta::after {
	background: #E8F1FF;
	color: var(--ers-blue);
}

.ers-site-footer .ers-footer-actions a.ers-core-booking-cta:is(:hover, :focus-visible),
.ers-page--contact .ers-contact-routes > .ers-card:first-child a.ers-core-booking-cta:is(:hover, :focus-visible) {
	background: #F3F8FF;
	box-shadow: 0 10px 22px -12px rgba(0, 16, 48, 0.6);
	color: var(--ers-blue-700, #003C8C);
}

.ers-site-footer .ers-footer-actions a.ers-core-booking-cta:is(:hover, :focus-visible)::after,
.ers-page--contact .ers-contact-routes > .ers-card:first-child a.ers-core-booking-cta:is(:hover, :focus-visible)::after {
	background: #D6E6FF;
}

/* ---------------------------------------------------------------------------
 * 7. Abschalten
 * ------------------------------------------------------------------------- */

/* „Einblenden beim Scrollen: Aus“ gilt auch für Bilder und die Ablauflinie. */
body.ers-motion-off .ers-img-fade.ers-img-pending,
body.ers-motion-off .ers-patient-journey__steps::before {
	opacity: 1 !important;
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.ers-img-fade.ers-img-pending {
		opacity: 1;
	}

}

@media print {
	.ers-img-fade.ers-img-pending,
	.ers-js-ready .ers-patient-journey.ers-reveal .ers-patient-journey__steps::before {
		opacity: 1;
	}

	.ers-js-ready .ers-header-shell {
		position: static;
		transform: none;
	}

	.ers-js-ready .ers-site-footer .ers-footer-back-to-top {
		display: none;
	}
}