/* =========================================================================
   IB-WOLK Redesign – Bewegungssystem

   Diese Datei wird als letztes Stylesheet geladen und bündelt sämtliche
   Übergänge, Hover-Feinheiten und Einblendungen der gesamten Website. Sie
   liegt bewusst nicht in den Seiten-Stylesheets: So bleibt das Verhalten an
   einer Stelle pflegbar und kann die dort gesetzten Grundzustände gezielt
   ergänzen, ohne Layout, Typografie oder Abstände anzufassen.

   Aufbau
   1. Bewegungstokens
   2. Grundverhalten und Sprungmarken
   3. Schaltflächen
   4. Navigation und mobiles Menü
   5. Karten, Panels und Bilder
   6. Textlinks und Seitenfuß
   7. Formular, Akkordeon und Inhaltsverzeichnis
   8. Einblendung beim Scrollen
   9. Bewegungsreduktion
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Bewegungstokens
   ---------------------------------------------------------------------- */

:root {
	/*
	 * Die Staffelung der Dauern ist Absicht: Was unmittelbar auf eine Eingabe
	 * antwortet, bleibt schnell; was eine größere Fläche betrifft, darf sich
	 * mehr Zeit nehmen. Gleiche Dauer für alles würde die Oberfläche träge
	 * wirken lassen.
	 */

	/* Kurze Rückmeldung auf eine direkte Eingabe: Farbe, Kontur, Pfeil. */
	--dur-fast: 230ms;
	/* Sichtbare Zustandsänderung: Kartenhintergrund, Unterstreichung, Menü. */
	--dur-base: 360ms;
	/* Zusammenspiel mehrerer Teile auf einer großen Fläche. */
	--dur-rich: 450ms;
	/* Einblendung eines Abschnitts beim Scrollen. */
	--dur-entrance: 620ms;

	/*
	 * Weicher Ausklang ohne Überschwingen: Die Kurve zieht früh an und läuft
	 * lange aus, wodurch auch der Weg zurück ruhig wirkt.
	 */
	--ease-out: cubic-bezier(0.22, 0.65, 0.3, 1);

	/* Bewegungsmaße – klein halten, damit nichts springt. */
	--motion-lift: 1px;
	--motion-nudge: 4px;
	/* Die großen Startseitenpanels dürfen ihren Pfeil deutlicher führen. */
	--motion-nudge-panel: 8px;
	--motion-zoom: 1.025;
	--motion-rise: 18px;
	--motion-rise-card: 14px;
	--motion-stagger: 70ms;

	/*
	 * Das Theme benutzt an über vierzig Stellen die Kurzform var(--transition).
	 * Sie wird hier auf das neue System gehoben, statt jede Regel einzeln
	 * anzufassen – dadurch laufen alle bestehenden Übergänge sofort mit der
	 * gemeinsamen Dauer und Kurve.
	 */
	--transition: var(--dur-fast) var(--ease-out);
}

/* -------------------------------------------------------------------------
   2. Grundverhalten und Sprungmarken
   ---------------------------------------------------------------------- */

/*
 * Sanftes Springen zu Ankern. Nur wenn das Betriebssystem keine reduzierte
 * Bewegung verlangt – die Abfrage steht hier statt in Abschnitt 9, weil
 * scroll-behavior sonst als Einzelregel wieder überschrieben werden müsste.
 */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Sprungziele nicht direkt an die Fensterkante setzen. */
:target {
	scroll-margin-top: var(--space-xl);
}

/* -------------------------------------------------------------------------
   3. Schaltflächen
   ---------------------------------------------------------------------- */

.button {
	transition:
		background-color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

/* Beim Drücken kehrt die Schaltfläche in die Ruhelage zurück. */
.button:active {
	transform: none;
}

/* -------------------------------------------------------------------------
   4. Navigation und mobiles Menü
   ---------------------------------------------------------------------- */

/*
 * Die Unterstreichung liegt absolut und wird nur skaliert. Dadurch wandert
 * beim Überfahren kein Menüpunkt und die Zeilenhöhe bleibt unberührt.
 * Der aktive Punkt trägt dieselbe Linie dauerhaft ausgefahren.
 */
.primary-nav__list a {
	position: relative;
}

.primary-nav__list a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0.375rem;
	left: 0;
	height: 2px;
	background-color: var(--c-red);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--dur-base) var(--ease-out);
}

.primary-nav__list :is(.current-menu-item, .current-menu-parent, .current-menu-ancestor, .current_page_ancestor) > a::after,
.primary-nav__list :is(.current-menu-item, .current-menu-parent, .current-menu-ancestor, .current_page_ancestor) > .menu-item__row > a::after,
.primary-nav__list a:focus-visible::after {
	transform: scaleX(1);
}

/*
 * Mobiles Menü: Das hidden-Attribut bleibt die maßgebliche Zustandsangabe für
 * Screenreader und Tastatur. Sichtbar wird zusätzlich weich ein- und
 * ausgeblendet; das Skript entfernt hidden vor dem Öffnen und setzt es erst
 * nach dem Ausblenden wieder. Ohne aktives Skript greift keine dieser Regeln.
 */
html.ibw-motion .mobile-nav {
	opacity: 0;
	transform: translateY(-8px);
	transition:
		opacity var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
}

html.ibw-motion .mobile-nav.is-open {
	opacity: 1;
	transform: none;
}

/* Die Hamburger-Striche wandern weich in das Kreuz. */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	transition:
		background-color var(--dur-fast) var(--ease-out),
		transform var(--dur-base) var(--ease-out),
		top var(--dur-base) var(--ease-out);
}

/* -------------------------------------------------------------------------
   5. Karten, Panels und Bilder
   ---------------------------------------------------------------------- */

/* Kartenflächen wechseln Hintergrund und Kontur in gleicher Geschwindigkeit. */
.service-card,
.related-card,
.expert-card,
.feature-card,
.contact-choice,
.competence-tile__body,
.feature-card__title {
	transition:
		background-color var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out),
		color var(--dur-base) var(--ease-out);
}

/* Pfeile wandern kurz und knapp. */
.service-card__arrow,
.related-card__arrow,
.contact-choice__arrow,
.arrow-short,
.link-down__arrow {
	transition: transform var(--dur-fast) var(--ease-out);
}

/*
 * Bildzoom nur dort, wo die Hülle den Überlauf beschneidet und das Element
 * tatsächlich anklickbar ist. Ein Zoom auf einer nicht bedienbaren Fläche
 * wäre reine Dekoration.
 */
.feature-card__media img,
.expert-card__media img,
.competence-tile__media img,
.kontakt__map-image {
	transition: transform var(--dur-base) var(--ease-out);
}

/* -------------------------------------------------------------------------
   5a. Leistungspanels der Startseite

   Die drei großen Flächen reagieren als Ganzes statt nur mit dem Pfeil.
   Gesteuert wird das über zwei Schalter am Panel:

   --panel-on    schaltet die Deckkraft der beiden Zierebenen
   --panel-move  schaltet die Verschiebungen; bei reduzierter Bewegung bleibt
                 er auf 0, sodass sich nichts bewegt, ohne dass die Regeln
                 doppelt geschrieben werden müssen

   Dadurch stehen Zeiger- und Tastaturzustand an einer Stelle, und keine
   Abmessung, Farbe oder Schrift der freigegebenen Gestaltung ändert sich.
   ---------------------------------------------------------------------- */

.service-panel {
	--panel-on: 0;
	--panel-move: 0;
	/* Hinein etwas ruhiger als heraus – das wirkt weniger schnippisch. */
	--panel-dur-in: 420ms;
	--panel-dur-out: 340ms;
	/* Charakter je Fläche – die Ruhelage bleibt für alle drei gleich. */
	--panel-icon-rise: -2.5px;
	--panel-icon-shift: 0px;
	--panel-icon-grow: 0.03;
	--panel-icon-turn: 0deg;
	/* Der Farbschleier hält sich zurück; der Text bleibt voll lesbar. */
	--panel-sweep: rgba(255, 255, 255, 0.07);

	/* Der Schleier wandert innerhalb der Fläche und darf nicht herausragen. */
	overflow: hidden;
	transition: background-color var(--panel-dur-out) var(--ease-out);
}

/* Prüfungen: das Rad dreht sich ein Stück mit. */
.service-panel--charcoal {
	--panel-icon-turn: -4.5deg;
}

/* Gutachten: der Stift setzt diagonal an. */
.service-panel--offwhite {
	--panel-icon-shift: 2.5px;
	--panel-sweep: rgba(20, 24, 28, 0.05);
}

/* Sicherheit: das Schild wächst nur, es dreht sich nicht. */
.service-panel--red {
	--panel-icon-grow: 0.04;
	--panel-icon-turn: 0deg;
	--panel-sweep: rgba(255, 255, 255, 0.1);
}

/*
 * Die einzige Zierebene: ein weicher Streifen, der über die Fläche zieht.
 * z-index 0 liegt unter dem Inhalt auf 2; isolation am Panel hält diese
 * Ordnung von der übrigen Seite fern.
 */
.service-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: linear-gradient(100deg, transparent 0%, var(--panel-sweep) 45%, transparent 100%);
	opacity: var(--panel-on);
	transform: translate3d(calc(-18% + var(--panel-move) * 18%), 0, 0);
	transition:
		opacity var(--panel-dur-out) var(--ease-out),
		transform var(--panel-dur-out) var(--ease-out);
}

/*
 * Das Symbol ist das einzige bewegte Element im Inhalt. Bei --panel-move: 0
 * ergibt die Rechnung exakt translate3d(0,0,0) scale(1) rotate(0deg), also
 * die unveränderte Ruhelage.
 */
.service-panel__icon {
	transform:
		translate3d(
			calc(var(--panel-move) * var(--panel-icon-shift)),
			calc(var(--panel-move) * var(--panel-icon-rise)),
			0
		)
		scale(calc(1 + var(--panel-move) * var(--panel-icon-grow)))
		rotate(calc(var(--panel-move) * var(--panel-icon-turn)));
	transition: transform var(--panel-dur-out) var(--ease-out);
}

/*
 * Überschrift und Fließtext bleiben bewusst stehen. Ein wandernder Textblock
 * hat die Anordnung vorher unruhig wirken lassen.
 */

/*
 * Der Pfeil führt die Bewegung an. transform ergänzt hier nur die Waagerechte;
 * die senkrechte Ausrichtung steckt in translate und bleibt unberührt.
 */
.service-panel__arrow {
	transform: translate3d(calc(var(--panel-move) * var(--motion-nudge-panel)), 0, 0);
	transition: transform var(--panel-dur-out) var(--ease-out);
}

/* Tastatur: dieselbe Rückmeldung wie beim Zeiger. */
.service-panel:focus-visible,
.service-panel:focus-within {
	--panel-on: 1;
	--panel-move: 1;
}

.service-panel:focus-visible::before,
.service-panel:focus-within::before,
.service-panel:focus-visible .service-panel__icon,
.service-panel:focus-within .service-panel__icon,
.service-panel:focus-visible .service-panel__arrow,
.service-panel:focus-within .service-panel__arrow {
	transition-duration: var(--panel-dur-in);
}

/* -------------------------------------------------------------------------
   6. Textlinks und Seitenfuß
   ---------------------------------------------------------------------- */

/*
 * Diese Verweise arbeiten allein mit dem Farbwechsel. Die Unterstreichung ist
 * ausdrücklich abgeschaltet – auch dort, wo eine Seitendatei sie mitbringt –,
 * damit beim Überfahren keine Linie aufblitzt.
 */
.site-footer__list a,
.site-footer__legal a,
.breadcrumb__item a,
.docs-note__link,
.docs-cta__phone,
.contact-direct__link,
.contact-help__alt-phone,
.contact-form__fallback-list a,
.safety-support__link,
.apply__privacy-link,
.apply-cta__mail,
.legal-meta__links a,
.appointment-card__list a,
.appointment-card__route,
.service-faq__phone a,
.booking-cta__phone a,
.kontakt__contact-list a {
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}

/*
 * Rechtstexte behalten ihre dauerhafte Unterstreichung: Im Fließtext ist sie
 * das eigentliche Erkennungsmerkmal eines Verweises. Sie ändert sich beim
 * Überfahren aber nicht mehr, dort wirkt allein die Farbe.
 */
.legal-body a {
	transition: color var(--dur-fast) var(--ease-out);
}

/* -------------------------------------------------------------------------
   7. Formular, Akkordeon und Inhaltsverzeichnis
   ---------------------------------------------------------------------- */

.page-kontakt .contact-form__panel .ff-el-form-control {
	transition:
		background-color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out);
}

.page-kontakt .contact-form__panel .ff-btn-submit,
.page-kontakt .contact-form__panel button.ff-btn {
	transition:
		background-color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

/*
 * Das Plus des Akkordeons wird zum Minus, indem der senkrechte Strich
 * gedreht wird. Die Vorlage blendet ihn hart aus; display lässt sich nicht
 * weich schalten, eine Drehung dagegen schon.
 */
.faq-item__indicator::after {
	transition: transform var(--dur-base) var(--ease-out);
}

.faq-item[open] .faq-item__indicator::after {
	display: block;
	transform: translateX(-50%) rotate(90deg);
}

/* Winkel des Inhaltsverzeichnisses dreht weich mit. */
.legal-toc__summary::after {
	transition: transform var(--dur-base) var(--ease-out);
}

/* -------------------------------------------------------------------------
   8. Einblendung beim Scrollen

   Die Ruhezustände hängen an der Klasse ibw-motion, die ein winziges Skript
   im Kopfbereich setzt. Fehlt JavaScript oder wünscht das Betriebssystem
   reduzierte Bewegung, existiert die Klasse nicht und der gesamte Inhalt ist
   von Beginn an sichtbar. Bewegt werden ausschließlich opacity und transform.
   ---------------------------------------------------------------------- */

html.ibw-motion .site-main > section,
html.ibw-motion .site-main > .gutachten-outro,
html.ibw-motion .site-main > .company-standort,
html.ibw-motion .site-main > .legal-doc {
	opacity: 0;
	transform: translateY(var(--motion-rise));
	transition:
		opacity var(--dur-entrance) var(--ease-out),
		transform var(--dur-entrance) var(--ease-out);
}

/*
 * Kopfbereiche bleiben unangetastet: Sie stehen über der Falz und tragen auf
 * mehreren Seiten das LCP-Bild.
 */
html.ibw-motion .site-main > .hero,
html.ibw-motion .site-main > .home-entry,
html.ibw-motion .site-main > [class*="-hero"],
/*
 * Auf der Kontaktseite steht das Formular bewusst direkt hinter einer knappen
 * Einleitung. Beides liegt über der Falz und darf deshalb nicht erst
 * eingeblendet werden – die Felder sollen ohne Verzögerung bereitstehen.
 */
html.ibw-motion .site-main > .contact-top {
	opacity: 1;
	transform: none;
	transition: none;
}

/* Kartengruppen laufen leicht versetzt ein; die Verzögerung setzt das Skript. */
html.ibw-motion .services-grid > *,
html.ibw-motion .feature-cards > *,
html.ibw-motion .expert-grid > *,
html.ibw-motion .competence__list > *,
html.ibw-motion .related-grid > *,
html.ibw-motion .values__list > *,
html.ibw-motion .worklife__list > *,
html.ibw-motion .docs__list > *,
html.ibw-motion .safety-rows > *,
html.ibw-motion .safety-audience__list > *,
html.ibw-motion .trust-strip__list > *,
html.ibw-motion .regions__list > *,
html.ibw-motion .partners__list > * {
	opacity: 0;
	transform: translateY(var(--motion-rise-card));
	transition:
		opacity var(--dur-entrance) var(--ease-out),
		transform var(--dur-entrance) var(--ease-out);
}

/*
 * Die Ruhezustände oben binden ein Element mit (Klasse, Klasse, Typ). Der
 * sichtbare Zustand muss darüber liegen, sonst bliebe der Abschnitt verborgen.
 */
html.ibw-motion .site-main .is-revealed,
html.ibw-motion .site-main > .is-revealed {
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------------------------
   9. Zeigergeräte

   Alle Hover-Feinheiten gelten ausschließlich für echte Zeigergeräte. Auf
   Touch-Bedienung bliebe ein Hover-Zustand nach dem Antippen hängen.
   Jede Wirkung hat oben oder in den Seiten-Stylesheets eine sichtbare
   Entsprechung für :focus-visible.
   ---------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

	/* Schaltflächen heben sich einen Pixel an. */
	.button:hover,
	.page-kontakt .contact-form__panel .ff-btn-submit:hover,
	.page-kontakt .contact-form__panel button.ff-btn:hover {
		transform: translateY(calc(var(--motion-lift) * -1));
	}

	/* Menüpunkte fahren ihre Linie aus. */
	.primary-nav__list a:hover::after {
		transform: scaleX(1);
	}

	/* Die Leistungspanels reagieren als Ganzes – siehe Abschnitt 5a. */
	.service-panel:hover {
		--panel-on: 1;
		--panel-move: 1;
	}

	.service-panel:hover,
	.service-panel:hover::before,
	.service-panel:hover .service-panel__icon,
	.service-panel:hover .service-panel__arrow {
		transition-duration: var(--panel-dur-in);
	}

	/* Bilder in bedienbaren Karten zoomen minimal. */
	.feature-card:hover .feature-card__media img,
	.expert-card:hover .expert-card__media img,
	.competence-tile:hover .competence-tile__media img,
	.kontakt__map:hover .kontakt__map-image {
		transform: scale(var(--motion-zoom));
	}

	/*
	 * Textlinks bekommen hier bewusst keine Unterstreichung. Ihre Rückmeldung
	 * beim Überfahren ist der Farbwechsel, den die jeweilige Seitendatei setzt.
	 */
}

/*
 * Touch-Bedienung: kein nachhängender Hover-Zustand, sondern eine kurze
 * Rückmeldung genau solange, wie der Finger die Fläche berührt.
 */
@media (hover: none) {
	.service-panel:active {
		--panel-on: 1;
		--panel-move: 1;
	}
}

/* Tastaturbedienung erhält dieselbe Rückmeldung wie der Zeiger. */
.button:focus-visible,
.page-kontakt .contact-form__panel .ff-btn-submit:focus-visible,
.page-kontakt .contact-form__panel button.ff-btn:focus-visible {
	transform: translateY(calc(var(--motion-lift) * -1));
}

/*
 * Die Anfahrtsgrafik ist selbst kein Link mehr, sondern trägt die Schaltfläche
 * für die interaktive Karte. Der Tastaturzustand hängt deshalb an focus-within.
 */
.competence-tile:focus-visible .competence-tile__media img,
.kontakt__map:focus-within .kontakt__map-image,
.feature-card:focus-within .feature-card__media img,
.expert-card:focus-within .expert-card__media img {
	transform: scale(var(--motion-zoom));
}

/* -------------------------------------------------------------------------
   10. Bewegungsreduktion

   Verlangt das Betriebssystem weniger Bewegung, bleibt alles sofort sichtbar
   und ruhig. Sichtbare Fokusringe und Farbwechsel bleiben erhalten, weil sie
   der Orientierung dienen und keine Bewegung sind.
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	html.ibw-motion .site-main > section,
	html.ibw-motion .site-main > .gutachten-outro,
	html.ibw-motion .site-main > .company-standort,
	html.ibw-motion .site-main > .legal-doc,
	html.ibw-motion .services-grid > *,
	html.ibw-motion .feature-cards > *,
	html.ibw-motion .expert-grid > *,
	html.ibw-motion .competence__list > *,
	html.ibw-motion .related-grid > *,
	html.ibw-motion .values__list > *,
	html.ibw-motion .worklife__list > *,
	html.ibw-motion .docs__list > *,
	html.ibw-motion .safety-rows > *,
	html.ibw-motion .safety-audience__list > *,
	html.ibw-motion .trust-strip__list > *,
	html.ibw-motion .regions__list > *,
	html.ibw-motion .partners__list > * {
		opacity: 1;
		transform: none;
		transition: none;
	}

	html.ibw-motion .mobile-nav,
	html.ibw-motion .mobile-nav.is-open {
		opacity: 1;
		transform: none;
	}

	/*
	 * Keine Verschiebungen und keine Vergrößerungen mehr. Aufgeführt sind nur
	 * Elemente, deren Ruhelage ohnehin ohne transform auskommt. Der Pfeil der
	 * Leistungspanels und die Kartennadel bleiben außen vor: Sie werden per
	 * transform mittig gesetzt und würden von "none" verschoben.
	 */
	.button:hover,
	.button:focus-visible,
	.feature-card:hover .feature-card__media img,
	.expert-card:hover .expert-card__media img,
	.competence-tile:hover .competence-tile__media img,
	.kontakt__map:hover .kontakt__map-image,
	.service-card:hover .service-card__arrow,
	.related-card:hover .related-card__arrow,
	.contact-choice:hover .contact-choice__arrow,
	a.link-arrow:hover .arrow-short {
		transform: none;
	}

	.primary-nav__list a::after {
		transition: none;
	}

	/*
	 * Leistungspanels: --panel-move bleibt auf 0, dadurch entfällt jede
	 * Verschiebung. Die beiden Zierebenen erscheinen weiterhin, aber ohne
	 * Übergang – ein Wechsel der Deckkraft ohne Dauer ist keine Bewegung.
	 */
	.service-panel:hover,
	.service-panel:focus-visible,
	.service-panel:focus-within,
	.service-panel:active {
		--panel-move: 0;
	}

	.service-panel,
	.service-panel::before,
	.service-panel__icon,
	.service-panel__arrow {
		transition: none;
	}
}