/* Shared public interactions. Loaded after page styles by inc/assets.php.
 * Cards reserve ::after for the border. Decorative backgrounds use ::before.
 * Information never lifts merely because it contains a link.
 */
:root {
  --mvo-hover-duration: 180ms;
  --mvo-hover-border-size: 2px;
  --mvo-hover-border-opacity: 1;
  --mvo-hover-lift: -3px;
  --mvo-hover-start: #d0021b;
  --mvo-hover-end: #f2c94c;
  --mvo-hover-focus: #9c1828;
  --mvo-hover-action-shadow: 0 8px 24px rgba(35, 24, 18, 0.14);
}

/* Only the paired appointments/news section on the homepage uses softer feedback. */
.home-page #home-duo-news-termine {
  --mvo-hover-duration: 240ms;
  --mvo-hover-border-size: 1px;
  --mvo-hover-border-opacity: 0.55;
  --mvo-hover-lift: -1px;
  --mvo-hover-action-shadow: 0 4px 14px rgba(35, 24, 18, 0.08);
}

.home-page #home-duo-news-termine :is(.home-duo-block, .home-news-item, .home-termin) {
  border-radius: 14px;
}

/* Local palette values are resolved here, rather than inherited as a root gradient. */
:is(.ueber-section-jugend, .mvo-kontakt-person.is-youth) {
  --mvo-hover-start: #1859a8;
  --mvo-hover-end: #52c6e8;
  --mvo-hover-focus: #1859a8;
}

:is(
  .mvo-card, .home-welcome-stats, .home-duo-block,
  .home-news-item, .home-termin, .home-savedate-card,
  .home-historie-tile, .ueber-story-card, .ueber-rhythm-card,
  .ueber-anfang-card, .ueber-mini-fact, .ueber-join-card,
  .ueber-jugend-fact, .ueber-jugend-media, .historie-person-card,
  .historie-chapter-media, .historie-stat, .historie-milestone,
  .historie-archive-tile, .historie-polaroid-card, .termin-card,
  .termine-archive-card, .mvo-search-result-card, .mvo-kontakt-card,
  .article-entry, .termine-subscribe-mini-inner, .article-gallery-modal-content .gallery-item,
  .mvo-button, .home-welcome-button, .home-historie-button,
  .home-savedate-button, .home-cta-button, .home-hero-slide-cta,
  .historie-chapter-button, .historie-outro-button, .ueber-join-button,
  .mvo-kontakt-button, .load-more-button, .termin-dialog-link,
  .article-gallery-toggle, .mvo-global-footer-link, .mvo-search-submit,
  .termine-subscribe-mini-link, .termine-subscribe-mini-copy
) {
  position: relative;
  isolation: isolate;
  transition: opacity 0.6s ease, translate var(--mvo-hover-duration) ease-out;
}

:is(
  .mvo-card, .home-welcome-stats, .home-duo-block,
  .home-news-item, .home-termin, .home-savedate-card,
  .home-historie-tile, .ueber-story-card, .ueber-rhythm-card,
  .ueber-anfang-card, .ueber-mini-fact, .ueber-join-card,
  .ueber-jugend-fact, .ueber-jugend-media, .historie-person-card,
  .historie-chapter-media, .historie-stat, .historie-milestone,
  .historie-archive-tile, .historie-polaroid-card, .termin-card,
  .termine-archive-card, .mvo-search-result-card, .mvo-kontakt-card,
  .article-entry, .termine-subscribe-mini-inner, .article-gallery-modal-content .gallery-item,
  .mvo-button, .home-welcome-button, .home-historie-button,
  .home-savedate-button, .home-cta-button, .home-hero-slide-cta,
  .historie-chapter-button, .historie-outro-button, .ueber-join-button,
  .mvo-kontakt-button, .load-more-button, .termin-dialog-link,
  .article-gallery-toggle, .mvo-global-footer-link, .mvo-search-submit,
  .termine-subscribe-mini-link, .termine-subscribe-mini-copy
)::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 4;
  width: auto;
  height: auto;
  border: var(--mvo-hover-border-size) solid var(--mvo-hover-start);
  border-radius: inherit;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mvo-hover-duration) ease-out;
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
:is(
  .mvo-card, .home-welcome-stats, .home-duo-block,
  .home-news-item, .home-termin, .home-savedate-card,
  .home-historie-tile, .ueber-story-card, .ueber-rhythm-card,
  .ueber-anfang-card, .ueber-mini-fact, .ueber-join-card,
  .ueber-jugend-fact, .ueber-jugend-media, .historie-person-card,
  .historie-chapter-media, .historie-stat, .historie-milestone,
  .historie-archive-tile, .historie-polaroid-card, .termin-card,
  .termine-archive-card, .mvo-search-result-card, .mvo-kontakt-card,
  .article-entry, .termine-subscribe-mini-inner, .article-gallery-modal-content .gallery-item,
  .mvo-button, .home-welcome-button, .home-historie-button,
  .home-savedate-button, .home-cta-button, .home-hero-slide-cta,
  .historie-chapter-button, .historie-outro-button, .ueber-join-button,
  .mvo-kontakt-button, .load-more-button, .termin-dialog-link,
  .article-gallery-toggle, .mvo-global-footer-link, .mvo-search-submit,
  .termine-subscribe-mini-link, .termine-subscribe-mini-copy
)::after {
  border-color: transparent;
  background: linear-gradient(135deg, var(--mvo-hover-start), var(--mvo-hover-end)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
}

/* A card's ordinary depth shadow is stable; hovering adds only its border. */
:is(
  .mvo-card, .home-welcome-stats, .home-duo-block,
  .home-news-item, .home-termin, .home-savedate-card,
  .home-historie-tile, .ueber-story-card, .ueber-rhythm-card,
  .ueber-anfang-card, .ueber-mini-fact, .ueber-join-card,
  .ueber-jugend-fact, .ueber-jugend-media, .historie-person-card,
  .historie-chapter-media, .historie-stat, .historie-milestone,
  .historie-archive-tile, .historie-polaroid-card, .termin-card,
  .termine-archive-card, .mvo-search-result-card, .mvo-kontakt-card,
  .article-entry, .termine-subscribe-mini-inner, .article-gallery-modal-content .gallery-item
) {
  box-shadow: var(--mvo-card-shadow, 0 8px 28px rgba(22, 18, 16, 0.05));
}
:is(.home-savedate-card, .ueber-join-card, .ueber-jugend-media) {
  --mvo-card-shadow: 0 20px 48px rgba(0, 0, 0, 0.2);
}

:is(
  .mvo-card, .home-welcome-stats, .home-duo-block,
  .home-news-item, .home-termin, .home-savedate-card,
  .home-historie-tile, .ueber-story-card, .ueber-rhythm-card,
  .ueber-anfang-card, .ueber-mini-fact, .ueber-join-card,
  .ueber-jugend-fact, .ueber-jugend-media, .historie-person-card,
  .historie-chapter-media, .historie-stat, .historie-milestone,
  .historie-archive-tile, .historie-polaroid-card, .termin-card,
  .termine-archive-card, .mvo-search-result-card, .mvo-kontakt-card,
  .article-entry, .termine-subscribe-mini-inner, .article-gallery-modal-content .gallery-item
):is(:hover, :focus-within) {
  box-shadow: var(--mvo-card-shadow, 0 8px 28px rgba(22, 18, 16, 0.05));
}
:is(
  .mvo-card, .home-welcome-stats, .home-duo-block,
  .home-news-item, .home-termin, .home-savedate-card,
  .home-historie-tile, .ueber-story-card, .ueber-rhythm-card,
  .ueber-anfang-card, .ueber-mini-fact, .ueber-join-card,
  .ueber-jugend-fact, .ueber-jugend-media, .historie-person-card,
  .historie-chapter-media, .historie-stat, .historie-milestone,
  .historie-archive-tile, .historie-polaroid-card, .termin-card,
  .termine-archive-card, .mvo-search-result-card, .mvo-kontakt-card,
  .article-entry, .termine-subscribe-mini-inner, .article-gallery-modal-content .gallery-item
):not(:is(a[href], button, summary, [role="button"], [role="link"])):is(:hover, :focus-within) {
  transform: none;
  translate: none;
  cursor: default;
}

/* Focus within highlights the card, but never turns the containing card into a button. */
:is(
  .mvo-card, .home-welcome-stats, .home-duo-block,
  .home-news-item, .home-termin, .home-savedate-card,
  .home-historie-tile, .ueber-story-card, .ueber-rhythm-card,
  .ueber-anfang-card, .ueber-mini-fact, .ueber-join-card,
  .ueber-jugend-fact, .ueber-jugend-media, .historie-person-card,
  .historie-chapter-media, .historie-stat, .historie-milestone,
  .historie-archive-tile, .historie-polaroid-card, .termin-card,
  .termine-archive-card, .mvo-search-result-card, .mvo-kontakt-card,
  .article-entry, .termine-subscribe-mini-inner, .article-gallery-modal-content .gallery-item,
  .mvo-button, .home-welcome-button, .home-historie-button,
  .home-savedate-button, .home-cta-button, .home-hero-slide-cta,
  .historie-chapter-button, .historie-outro-button, .ueber-join-button,
  .mvo-kontakt-button, .load-more-button, .termin-dialog-link,
  .article-gallery-toggle, .mvo-global-footer-link, .mvo-search-submit,
  .termine-subscribe-mini-link, .termine-subscribe-mini-copy
):not(:disabled):not([aria-disabled="true"]):not([inert]):not(:where([inert] *)):focus-within::after { opacity: var(--mvo-hover-border-opacity); }

@media (hover: hover) and (pointer: fine) {
:is(
  .mvo-card, .home-welcome-stats, .home-duo-block,
  .home-news-item, .home-termin, .home-savedate-card,
  .home-historie-tile, .ueber-story-card, .ueber-rhythm-card,
  .ueber-anfang-card, .ueber-mini-fact, .ueber-join-card,
  .ueber-jugend-fact, .ueber-jugend-media, .historie-person-card,
  .historie-chapter-media, .historie-stat, .historie-milestone,
  .historie-archive-tile, .historie-polaroid-card, .termin-card,
  .termine-archive-card, .mvo-search-result-card, .mvo-kontakt-card,
  .article-entry, .termine-subscribe-mini-inner, .article-gallery-modal-content .gallery-item,
  .mvo-button, .home-welcome-button, .home-historie-button,
  .home-savedate-button, .home-cta-button, .home-hero-slide-cta,
  .historie-chapter-button, .historie-outro-button, .ueber-join-button,
  .mvo-kontakt-button, .load-more-button, .termin-dialog-link,
  .article-gallery-toggle, .mvo-global-footer-link, .mvo-search-submit,
  .termine-subscribe-mini-link, .termine-subscribe-mini-copy
):not(:disabled):not([aria-disabled="true"]):not([inert]):not(:where([inert] *)):hover::after { opacity: var(--mvo-hover-border-opacity); }
:is(
  .mvo-card, .home-welcome-stats, .home-duo-block,
  .home-news-item, .home-termin, .home-savedate-card,
  .home-historie-tile, .ueber-story-card, .ueber-rhythm-card,
  .ueber-anfang-card, .ueber-mini-fact, .ueber-join-card,
  .ueber-jugend-fact, .ueber-jugend-media, .historie-person-card,
  .historie-chapter-media, .historie-stat, .historie-milestone,
  .historie-archive-tile, .historie-polaroid-card, .termin-card,
  .termine-archive-card, .mvo-search-result-card, .mvo-kontakt-card,
  .article-entry, .termine-subscribe-mini-inner, .article-gallery-modal-content .gallery-item
):is(a[href], button, summary, [role="button"], [role="link"]):not(:disabled):not([aria-disabled="true"]):not([inert]):not(:where([inert] *)):hover,
:is(
  .mvo-button, .home-welcome-button, .home-historie-button,
  .home-savedate-button, .home-cta-button, .home-hero-slide-cta,
  .historie-chapter-button, .historie-outro-button, .ueber-join-button,
  .mvo-kontakt-button, .load-more-button, .termin-dialog-link,
  .article-gallery-toggle, .mvo-global-footer-link, .mvo-search-submit,
  .termine-subscribe-mini-link, .termine-subscribe-mini-copy
):not(:disabled):not([aria-disabled="true"]):not([inert]):not(:where([inert] *)):hover,
[data-mvo-image-action]:hover {
  transform: var(--mvo-action-rest-transform, none);
  translate: 0 var(--mvo-hover-lift);
  box-shadow: var(--mvo-hover-action-shadow);
  cursor: pointer;
}
}

/* Native text links keep their existing color/underline feedback, without a glow. */
:where(.site-header, main, .mvo-global-quote, .termin-dialog, .historie-dialog,
       .termine-calendar-dialog, .article-gallery-modal, .article-image-lightbox)
:is(a[href], button, summary, [role="button"], [role="link"], [data-mvo-image-action]):not(:disabled):not([aria-disabled="true"]):not([inert]):not(:where([inert] *)):focus-visible {
  outline: 2px solid var(--mvo-hover-focus, #9c1828);
  outline-offset: 4px;
}

[data-mvo-image-action] {
  cursor: zoom-in;
  transition: translate var(--mvo-hover-duration) ease-out;
}
.home-hero-arrow { --mvo-action-rest-transform: translateY(-50%); }

/* Preserve image framing and visible captions on informational tiles. */
.home-historie-tile:not(a[href]):hover img { transform: none; filter: grayscale(0.3); }
.historie-person-card:not(a[href]):hover .historie-person-image { transform: none; filter: grayscale(0.4) contrast(1.02); }
.historie-archive-tile:not(a[href]):hover .historie-archive-image { transform: none; filter: grayscale(0.2); }
.historie-archive-tile:not(a[href]) .historie-archive-overlay,
.home-historie-tile:not(a[href]) .home-historie-tile-caption { opacity: 1; transform: none; }
.historie-archive-tile:not(a[href]):hover::before { opacity: 0; }

/* No surface wash on appointment cards; status borders remain visible at rest. */
.termin-card::before { content: none; }
.termin-card:is(:hover, :focus-within)::after { display: block; }

:where(.site-header, main, .mvo-global-quote, .termin-dialog, .historie-dialog,
       .termine-calendar-dialog, .article-gallery-modal, .article-image-lightbox)
:is(button:disabled, [aria-disabled="true"], [inert], [inert] *) {
  cursor: default;
}
:where(.site-header, main, .mvo-global-quote, .termin-dialog, .historie-dialog,
       .termine-calendar-dialog, .article-gallery-modal, .article-image-lightbox)
:is(button:disabled, [aria-disabled="true"], [inert], [inert] *):hover {
  transform: var(--mvo-action-rest-transform, none);
  translate: none;
  filter: none;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
:is(
  .mvo-card, .home-welcome-stats, .home-duo-block,
  .home-news-item, .home-termin, .home-savedate-card,
  .home-historie-tile, .ueber-story-card, .ueber-rhythm-card,
  .ueber-anfang-card, .ueber-mini-fact, .ueber-join-card,
  .ueber-jugend-fact, .ueber-jugend-media, .historie-person-card,
  .historie-chapter-media, .historie-stat, .historie-milestone,
  .historie-archive-tile, .historie-polaroid-card, .termin-card,
  .termine-archive-card, .mvo-search-result-card, .mvo-kontakt-card,
  .article-entry, .termine-subscribe-mini-inner, .article-gallery-modal-content .gallery-item,
  .mvo-button, .home-welcome-button, .home-historie-button,
  .home-savedate-button, .home-cta-button, .home-hero-slide-cta,
  .historie-chapter-button, .historie-outro-button, .ueber-join-button,
  .mvo-kontakt-button, .load-more-button, .termin-dialog-link,
  .article-gallery-toggle, .mvo-global-footer-link, .mvo-search-submit,
  .termine-subscribe-mini-link, .termine-subscribe-mini-copy
),
[data-mvo-image-action],
:is(
  .mvo-card, .home-welcome-stats, .home-duo-block,
  .home-news-item, .home-termin, .home-savedate-card,
  .home-historie-tile, .ueber-story-card, .ueber-rhythm-card,
  .ueber-anfang-card, .ueber-mini-fact, .ueber-join-card,
  .ueber-jugend-fact, .ueber-jugend-media, .historie-person-card,
  .historie-chapter-media, .historie-stat, .historie-milestone,
  .historie-archive-tile, .historie-polaroid-card, .termin-card,
  .termine-archive-card, .mvo-search-result-card, .mvo-kontakt-card,
  .article-entry, .termine-subscribe-mini-inner, .article-gallery-modal-content .gallery-item,
  .mvo-button, .home-welcome-button, .home-historie-button,
  .home-savedate-button, .home-cta-button, .home-hero-slide-cta,
  .historie-chapter-button, .historie-outro-button, .ueber-join-button,
  .mvo-kontakt-button, .load-more-button, .termin-dialog-link,
  .article-gallery-toggle, .mvo-global-footer-link, .mvo-search-submit,
  .termine-subscribe-mini-link, .termine-subscribe-mini-copy
)::after {
  transition: none;
}
:is(
  .mvo-card, .home-welcome-stats, .home-duo-block,
  .home-news-item, .home-termin, .home-savedate-card,
  .home-historie-tile, .ueber-story-card, .ueber-rhythm-card,
  .ueber-anfang-card, .ueber-mini-fact, .ueber-join-card,
  .ueber-jugend-fact, .ueber-jugend-media, .historie-person-card,
  .historie-chapter-media, .historie-stat, .historie-milestone,
  .historie-archive-tile, .historie-polaroid-card, .termin-card,
  .termine-archive-card, .mvo-search-result-card, .mvo-kontakt-card,
  .article-entry, .termine-subscribe-mini-inner, .article-gallery-modal-content .gallery-item
):is(a[href], button, summary, [role="button"], [role="link"]):not(:disabled):not([aria-disabled="true"]):not([inert]):not(:where([inert] *)):hover,
:is(
  .mvo-button, .home-welcome-button, .home-historie-button,
  .home-savedate-button, .home-cta-button, .home-hero-slide-cta,
  .historie-chapter-button, .historie-outro-button, .ueber-join-button,
  .mvo-kontakt-button, .load-more-button, .termin-dialog-link,
  .article-gallery-toggle, .mvo-global-footer-link, .mvo-search-submit,
  .termine-subscribe-mini-link, .termine-subscribe-mini-copy
):not(:disabled):not([aria-disabled="true"]):not([inert]):not(:where([inert] *)):hover,
[data-mvo-image-action]:hover {
  translate: none;
}
}