/*
 * SONTHEIMER Editorial-Motion – zentrale Komponente für alle Seiten (freigegeben 03.10.2026).
 * Dokumentation: 01_Design/designsystem.md Abschnitt 17 · Skript: assets/js/motion.js
 *
 * Grundsatz: Ruhelage = exakt die freigegebene statische Gestaltung (ohne JavaScript, „Bewegung reduzieren“,
 * Smartphone). Scroll-Bewegung nur per transform, Hover nur per transform/translate/opacity/color – keine Layoutverschiebung.
 * Komponenten werden über ihre bestehenden Klassen angesprochen (keine Zusatzklassen in den Inhalten nötig):
 *   Bildkacheln  .s-card-dark (Haltung), .s-post (Aktuelles: ohne Anheben, Headline-Farbwechsel)
 *   Textkacheln  .s-card (Start „Der Antrieb / Der Unterschied“, Leistungsfelder)
 *   Werte        .s-values (Wörter werden vom Skript als .m-wert ausgezeichnet)
 *   CTA          .s-button, .wp-block-button.is-style-sontheimer (nicht der Senden-Button des Formulars)
 */

/* ---------- Zentrale Werte ---------- */
:root {
	/* Werte: Farbwechsel der Buchstaben */
	--m-wert-dauer: 350ms;
	--m-wert-kurve: cubic-bezier(0.4, 0, 0.2, 1);
	/* Kacheln: ruhige Micro-Interaction – weich ein- und auslaufend, keine Farbänderung der Inhalte */
	--m-kachel-dauer: 800ms;                           /* Anheben, Tiefe, Overlay */
	--m-kachel-kurve: cubic-bezier(0.33, 0, 0.15, 1);  /* sanfter Start, lang auslaufend */
	--m-bild-dauer: 1200ms;                            /* Bildzoom bewusst langsamer = ruhiger */
	--m-bild-skala: 1.045;                             /* Finetuning 03.10.: vorher 1,035 */
	--m-bild-overlay: rgba(7, 23, 44, 0.22);           /* Farbton der Bild-Overlays (--s-overlay-25), subtiler: 22 % */
	/* Aktuelles-/Blog-Kacheln (04.10.2026): auf den warm-dunklen Beitragsbildern war 22 % / 1,045 / langsamer Start
	   kaum wahrnehmbar – eigene, sichtbare Abstimmung im selben Farbton, weiterhin ruhig und ohne Layoutänderung */
	--m-post-overlay: rgba(7, 23, 44, 0.34);           /* #07172c, 34 % */
	--m-post-skala: 1.06;
	--m-post-dauer: 700ms;
	--m-post-kurve: cubic-bezier(0.22, 1, 0.36, 1);    /* setzt sofort sichtbar ein, läuft weich aus */
	--m-post-titel-dauer: 280ms;                       /* Farbwechsel der Headline: wahrnehmbar, Ease-out */
	--m-lift-bild: -6px;                               /* vorher −4 px */
	--m-lift-text: -5px;                               /* vorher −3 px */
	--m-tiefe-hell: 0 30px 56px -30px rgba(22, 22, 22, 0.26), 0 4px 12px -6px rgba(22, 22, 22, 0.08);   /* vorher 22/44 px, 20 % */
	--m-tiefe-dunkel: 0 34px 62px -30px rgba(0, 0, 0, 0.65), 0 4px 12px -6px rgba(0, 0, 0, 0.35);   /* vorher 26/50 px, 55 % */
	/* CTA */
	--m-cta-hover: #9a7b4f;
	--m-cta-pfeil: 6px;
	--m-cta-dauer: 250ms;
}

/* ---------- Bildreserven ----------
   Bilder mit Bewegung nutzen eigene Bildvarianten mit Reserve aus den Originalen (Theme-Bilder „…-motion-…“).
   Am <picture>: data-m + style="--m-oben: …; --m-unten: …" in Design-px. Ruhelage zeigt exakt den freigegebenen Ausschnitt. */
@media (min-width: 768px) {
	picture[data-m] {
		position: absolute; left: 0; right: 0;
		top: calc(var(--m-oben, 0) * -1 * var(--u));
		bottom: calc(var(--m-unten, 0) * -1 * var(--u));
		width: auto; height: auto;
	}
	picture[data-m] img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---------- Scroll-Ebenen (nur wenn das Skript Motion aktiviert: html.m-an) ---------- */
html.m-an [data-m] {
	transform: translate3d(0, var(--m-y, 0px), 0);
	will-change: transform;
}
/* Quellenangabe des Bildzitats als eigene, ruhigere Ebene (Blockelement, sonst wirkt transform nicht) */
html.m-an .s-band__quote-by[data-m] { display: block; }

/* ---------- 1. Werte: reiner Farbwechsel der Buchstaben ----------
   Ruhe: Gold. Hover (nur Maus): nur die Buchstaben des Begriffs wechseln zur dunklen Seitenfläche (--s-dark).
   Hintergrund, Größe, Position und die anderen Werte bleiben unverändert. */
.m-wert { color: var(--s-gold); transition: color var(--m-wert-dauer) var(--m-wert-kurve); }
.m-wert.is-aktiv { color: var(--s-dark); }   /* nur im Prüfmodus (?pruefmodus=1&wert=…) */
@media (hover: hover) and (pointer: fine) {
	.m-wert:hover { color: var(--s-dark); }
}

/* ---------- 2. Bildkacheln: Overlay, Bild-Zoom, leichtes Anheben ---------- */
.s-card-dark__img, .s-post__img { position: relative; overflow: hidden; }
.s-card-dark__img::after,
.s-post__img::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: var(--m-bild-overlay);
	opacity: 0; transition: opacity var(--m-kachel-dauer) var(--m-kachel-kurve);
}
.s-card-dark__img img,
.s-post .s-post__img img {
	transform: translate3d(0, 0, 0) scale(1);
	backface-visibility: hidden;
	will-change: transform;
	transition: transform var(--m-bild-dauer) var(--m-kachel-kurve);
}
/* Anheben über die eigene Eigenschaft „translate“: addiert sich zur Scroll-Bewegung (transform), ohne sie zu stören */
.s-card-dark { translate: 0 0; transition: translate var(--m-kachel-dauer) var(--m-kachel-kurve); }
/* Aktuelles-Kacheln (Rolle „Aktuelles“): die ganze Kachel ist der Link – Bild und Headline reagieren gemeinsam.
   Headline: Gold → dunkleres, gedecktes Gold (--s-post-hover, 280 ms Ease-out, auch bei Tastaturfokus); keine Unterstreichung, keine Bewegung (Kachel hebt sich deshalb nicht). */
.s-post__title { transition: color var(--m-kachel-dauer) var(--m-kachel-kurve); }
.s-post .s-post__title { transition: color var(--m-post-titel-dauer) cubic-bezier(0, 0, 0.2, 1); }
/* Eigene Werte der Aktuelles-Kacheln – gelten automatisch auch für den WordPress-Baustein „Aktuelles“ (gleiche Klassen) */
.s-post {
	--m-bild-overlay: var(--m-post-overlay);
	--m-bild-skala: var(--m-post-skala);
	--m-kachel-dauer: var(--m-post-dauer);
	--m-bild-dauer: var(--m-post-dauer);
	--m-kachel-kurve: var(--m-post-kurve);
}
a.s-post:focus-visible .s-post__title { color: var(--s-post-hover); }

/* ---------- 3. Kartenflächen: Fläche und Tiefe als eigene Ebenen hinter dem Inhalt ---------- */
.s-card, .s-card-dark { position: relative; isolation: isolate; background: transparent; }
.s-card::before, .s-card-dark::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: var(--m-flaeche-farbe);
	translate: 0 0; transition: translate var(--m-kachel-dauer) var(--m-kachel-kurve);
}
.s-card::after, .s-card-dark::after {
	content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
	box-shadow: var(--m-flaeche-tiefe);
	opacity: 0; translate: 0 0;
	transition: opacity var(--m-kachel-dauer) var(--m-kachel-kurve), translate var(--m-kachel-dauer) var(--m-kachel-kurve);
}
.s-card { --m-flaeche-farbe: var(--s-sand); --m-flaeche-tiefe: var(--m-tiefe-hell); }
.s-card-dark { --m-flaeche-farbe: var(--s-dark-raised); --m-flaeche-tiefe: var(--m-tiefe-dunkel); }

@media (hover: hover) and (pointer: fine) {
	/* Bildkacheln: ganze Kachel hebt sich, Overlay und Zoom im Bild */
	.s-card-dark:hover { translate: 0 var(--m-lift-bild); }
	.s-post:hover .s-post__title { color: var(--s-post-hover); }
	.s-card-dark:hover .s-card-dark__img::after, .s-post:hover .s-post__img::after { opacity: 1; }
	.s-card-dark:hover .s-card-dark__img img, .s-post:hover .s-post__img img { transform: translate3d(0, 0, 0) scale(var(--m-bild-skala)); }
	.s-card-dark:hover::after { opacity: 1; }
	/* Textkacheln: nur die Fläche hebt sich mit zarter Tiefe – Schrift und Farben bleiben unverändert */
	.s-card:hover::before, .s-card:hover::after { translate: 0 var(--m-lift-text); }
	.s-card:hover::after { opacity: 1; }
}
a.s-post:focus-visible .s-post__img::after { opacity: 1; }
a.s-post:focus-visible .s-post__img img { transform: translate3d(0, 0, 0) scale(var(--m-bild-skala)); }

/* ---------- 4. CTA-Hover (primäre CTA-Komponente; Formular-Button bleibt wie freigegeben) ---------- */
.s-button:not(.s-button--senden),
.wp-block-button.is-style-sontheimer .wp-block-button__link { transition: background-color var(--m-cta-dauer) ease; }
.s-button:not(.s-button--senden)::after,
.wp-block-button.is-style-sontheimer .wp-block-button__link::after { transition: transform var(--m-cta-dauer) ease; }
.s-button:not(.s-button--senden):hover,
.wp-block-button.is-style-sontheimer .wp-block-button__link:hover { background: var(--m-cta-hover); }
.s-button:not(.s-button--senden):hover::after,
.wp-block-button.is-style-sontheimer .wp-block-button__link:hover::after { transform: translateX(var(--m-cta-pfeil)); }

/* ---------- 5. Bildzitat Wendeltreppe: freigegebene Position ----------
   +67 Design-px ≈ 50 px bei 1440, Tablet proportional weniger; Smartphone unverändert. */
@media (min-width: 768px) {
	.s-band--quote .s-band__quote { bottom: calc((125 + 67) * var(--u)); }
}

/* ---------- „Bewegung reduzieren“: kein Zoom, kein Anheben, keine Übergänge der Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
	.s-card-dark:hover .s-card-dark__img img, .s-post:hover .s-post__img img, a.s-post:focus-visible .s-post__img img { transform: none; }
	.s-card-dark:hover, .s-card:hover::before, .s-card:hover::after { translate: none; }
	.m-wert { transition: none; }
}

/* ---------- Prüfmodus (?pruefmodus=1) – nur Technik, Panel wird vom Skript erzeugt ---------- */
html.m-debug-an [data-m] { outline: 2px dashed #e0218a; outline-offset: -2px; }
.m-debug {
	position: fixed; right: 16px; bottom: 16px; z-index: 9999;
	min-width: 320px; padding: 10px 12px;
	background: rgba(255, 255, 255, .95); color: #161616;
	border: 1px solid #bbb; box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
	font: 12px/1.45 ui-monospace, Menlo, monospace; letter-spacing: 0; white-space: pre;
}