/* DG Motion – Stile für dergoldschmied.nrw
   Farben des Layouts: Papier #f1f1f1, Tinte #1b1b1b. */

:root {
  --dg-ink: #1b1b1b;
  --dg-paper: #f1f1f1;
  --dg-ease: cubic-bezier(.22, 1, .36, 1);
}

/* 1. Vorab-Zustand: Elemente, die das JS einblendet, sind nur bei aktivem JS unsichtbar.
      Die Liste spiegelt PRE in dg-motion.js – beide zusammen pflegen. */
html.dg-js .elementor-location-header .elementor-widget-theme-site-logo,
html.dg-js .elementor-location-header .elementor-widget-nav-menu,
html.dg-js .elementor-widget-heading .elementor-heading-title,
html.dg-js .elementor-widget-text-editor .elementor-widget-container > *,
html.dg-js .elementor-widget-theme-post-content .elementor-widget-container > *,
html.dg-js .elementor-portfolio-item .elementor-post__thumbnail__link,
html.dg-js .elementor-widget-image:not(.elementor-widget-theme-site-logo) .elementor-widget-container,
html.dg-js .elementor-widget-theme-post-featured-image .elementor-widget-container,
html.dg-js .elementor-widget-video .elementor-widget-container,
html.dg-js .elementor-widget-video-playlist .elementor-widget-container,
html.dg-js .elementor-widget-form .elementor-field-group,
html.dg-js .elementor-widget-social-icons .elementor-grid-item,
html.dg-js .elementor-widget-icon .elementor-icon-wrapper,
html.dg-js .elementor-widget-post-navigation .elementor-widget-container,
html.dg-js body > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, table) {
  opacity: 0;
}

/* 2. Kopfbereich */
.elementor-location-header .elementor-sticky {
  transition: box-shadow .6s ease, background-color .6s ease;
}
.elementor-location-header .elementor-sticky.dg-scrolled {
  background-color: rgba(241, 241, 241, .86) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 rgba(27, 27, 27, .06), 0 14px 34px -28px rgba(27, 27, 27, .45);
}
.elementor-widget-theme-site-logo img {
  transform-origin: left center;
  transition: transform .7s var(--dg-ease), opacity .4s ease;
}
.elementor-location-header .dg-scrolled .elementor-widget-theme-site-logo img {
  transform: scale(.86);
}
.elementor-widget-theme-site-logo a:hover img {
  opacity: .72;
}

/* Navigation: Geschwister treten beim Überfahren zurück */
.elementor-nav-menu--main .elementor-item {
  transition: opacity .35s ease, color .35s ease;
}
.elementor-nav-menu--main:hover .elementor-item:not(:hover):not(.elementor-item-active) {
  opacity: .45;
}
.elementor-nav-menu--main .elementor-item:after {
  transition: transform .45s var(--dg-ease), opacity .3s ease, width .45s var(--dg-ease) !important;
}

/* 3. Portfolio-Kacheln */
.elementor-portfolio-item__img {
  overflow: hidden;
}
/* Hülle für Parallaxe und Zoom; das Bild darin behält Elementors eigene Zentrierung */
.dg-pfimg {
  position: relative;
  width: 100%;
  height: 100%;
  will-change: transform;
  backface-visibility: hidden;
}
.elementor-portfolio-item__overlay {
  transition: opacity .7s var(--dg-ease) !important;
}
.elementor-portfolio-item__title {
  transform: translateY(12px);
  letter-spacing: .02em;
  transition: transform .8s var(--dg-ease), letter-spacing .8s var(--dg-ease);
}
.elementor-portfolio-item:hover .elementor-portfolio-item__title,
.elementor-portfolio-item:focus-within .elementor-portfolio-item__title {
  transform: translateY(0);
  letter-spacing: .06em;
}
.elementor-post__thumbnail__link:focus-visible {
  outline: 1px solid var(--dg-ink);
  outline-offset: 4px;
}

/* 4. Schaltflächen und Formular */
.elementor-button {
  transition: box-shadow .5s var(--dg-ease), background-color .4s ease, color .4s ease, border-color .4s ease;
  will-change: transform;
}
.elementor-button:hover {
  box-shadow: 0 14px 30px -18px rgba(27, 27, 27, .55);
}
.elementor-field-textual {
  transition: border-color .4s ease, box-shadow .4s ease, background-color .4s ease;
}
.elementor-field-textual:focus {
  border-color: var(--dg-ink) !important;
  box-shadow: 0 1px 0 0 var(--dg-ink);
  outline: none;
}
.elementor-message {
  animation: dg-rise .7s var(--dg-ease) both;
}
@keyframes dg-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 5. Fußbereich, Beitragsnavigation */
.elementor-social-icon {
  transition: transform .5s var(--dg-ease), opacity .3s ease, background-color .3s ease !important;
}
.elementor-social-icon:hover {
  transform: translateY(-3px);
}
.elementor-widget-icon .elementor-icon {
  transition: transform .5s var(--dg-ease);
}
.elementor-widget-icon .elementor-icon:hover {
  transform: translateY(-4px);
}
.post-navigation__arrow-prev,
.post-navigation__arrow-next,
.post-navigation__prev--title,
.post-navigation__next--title {
  transition: transform .5s var(--dg-ease), opacity .3s ease;
}
.post-navigation__prev--link:hover .post-navigation__arrow-prev { transform: translateX(-4px); }
.post-navigation__next--link:hover .post-navigation__arrow-next { transform: translateX(4px); }

/* 6. Schleier für den Seitenwechsel */
.dg-veil {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: var(--dg-paper);
  opacity: 0;
  pointer-events: none;
}

/* 7. Ruhe für Menschen, die Bewegung reduzieren möchten */
@media (prefers-reduced-motion: reduce) {
  .elementor-portfolio-item__title,
  .elementor-social-icon:hover,
  .elementor-widget-icon .elementor-icon:hover,
  .elementor-location-header .dg-scrolled .elementor-widget-theme-site-logo img,
  .post-navigation__prev--link:hover .post-navigation__arrow-prev,
  .post-navigation__next--link:hover .post-navigation__arrow-next {
    transform: none;
    transition-duration: .01ms;
  }
}