/* ============================================================
 * polish.css v7
 * Modal Transitions, Cards Hover 1.15, Cards Reveal Pop,
 * Bilder Hover Scale, Footer Translates, Footer Groessen.
 * ============================================================ */

/* --- Modal sanft ein und aus --- */
.review-modal,
.lightbox {
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.review-modal__content,
.lightbox__img {
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Cards Hover 1.15 KOMPLETT, schlaegt components.css und reveal.css --- */
html body main .card,
html body .section-creme .card,
html body .section-papier .card {
  transform-origin: center center !important;
  position: relative;
  z-index: 1;
  transition:
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 700ms cubic-bezier(0.22, 1, 0.36, 1),
    z-index 0ms 700ms !important;
}
@media (hover: hover) {
  html body main .card:hover,
  html body .section-creme .card:hover,
  html body .section-papier .card:hover {
    transform: scale(1.20) translateY(0) !important;
    transform-origin: center center !important;
    z-index: 10 !important;
    transition:
      transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 700ms cubic-bezier(0.22, 1, 0.36, 1),
      z-index 0ms 0ms !important;
    box-shadow:
      0 6px 14px rgba(40, 18, 18, 0.18),
      0 28px 56px rgba(40, 18, 18, 0.32),
      0 60px 120px rgba(40, 18, 18, 0.36) !important;
  }
  /* Kill den components.css Effekt der nur das Bild skaliert */
  html body main .card:hover .card__media img,
  html body .section-creme .card:hover .card__media img,
  html body .section-papier .card:hover .card__media img {
    transform: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body main .card:hover,
  html body .section-creme .card:hover,
  html body .section-papier .card:hover { transform: none !important; }
}

/* --- Cards Reveal mit 180 Grad Drehung, langsam wahrnehmbar ---
 * Drei Dinge UND Anfahrt drehen sich beim Reveal einmal halbe Achse.
 * NICHT im Hover damit Hover Scale 1.20 schlaegt.
 */
html.js-reveal [data-reveal-effect="cards-stagger"] [data-reveal-child]:not(:hover) {
  transform: rotateY(-180deg) translateY(60px) scale(0.85);
  transition-duration: 2200ms;
}
html.js-reveal [data-reveal-effect="cards-stagger"].is-revealed [data-reveal-child]:not(:hover) {
  transform: rotateY(0deg) translateY(0) scale(1);
}
html.js-reveal [data-reveal-effect="cards-stagger"] .grid {
  perspective: 1500px;
}
html.js-reveal [data-reveal-effect="cards-flip"] [data-reveal-child]:not(:hover) {
  transform: rotateY(-180deg) translateY(60px) scale(0.85);
  transition-duration: 2200ms;
}
html.js-reveal [data-reveal-effect="cards-flip"].is-revealed [data-reveal-child]:not(:hover) {
  transform: rotateY(0deg) translateY(0) scale(1);
}
html.js-reveal [data-reveal-effect="cards-flip"] .grid {
  perspective: 1500px;
}

/* --- Bilder Hover Scale 1.05 fuer alle main picture-wrap --- */
main .picture-wrap {
  cursor: zoom-in;
  isolation: isolate;
  position: relative;
  transition: box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
main .picture-wrap > img,
main .picture-wrap > picture > img,
main .picture-wrap img {
  pointer-events: none;
  transition:
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  main .picture-wrap:hover > img,
  main .picture-wrap:hover > picture > img,
  main .picture-wrap:hover img {
    transform: scale(1.05);
    filter: brightness(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  main .picture-wrap:hover > img,
  main .picture-wrap:hover > picture > img,
  main .picture-wrap:hover img { transform: none; filter: none; }
}

/* --- Footer Translates 30px,
 * KONTAKT nach links, FOLGEN SIE UNS nach rechts,
 * OEFFNUNGSZEITEN bleibt mittig --- */
html body .site-footer .site-footer__grid--three > .site-footer__col:nth-child(1).is-revealed,
html body .site-footer [data-reveal-effect="footer-stage"].is-revealed .site-footer__col:nth-child(1) {
  transform: translateX(-30px) !important;
}
html body .site-footer [data-reveal-effect="footer-stage"].is-revealed .site-footer__col:nth-child(3) {
  transform: translateX(30px) !important;
}
/* Fallback ohne JS */
html:not(.js-reveal) .site-footer .site-footer__col:nth-child(1) {
  transform: translateX(-30px);
}
html:not(.js-reveal) .site-footer .site-footer__col:nth-child(3) {
  transform: translateX(30px);
}

/* --- Footer Groessen v6 FESTE PIXEL --- */
html body .site-footer .site-footer__grid {
  gap: 6.5rem !important;
  column-gap: 6.5rem !important;
}
html body .site-footer .site-footer__col h3 {
  font-size: 17px !important;
  line-height: 1.3 !important;
  text-align: left !important;
  display: block !important;
  width: auto !important;
  position: relative !important;
}
html body .site-footer .site-footer__col h3::after {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
html body .site-footer .site-footer__col p,
html body .site-footer .site-footer__col li,
html body .site-footer .site-footer__col a:not(.social-link),
html body .site-footer .site-footer__col time,
html body .site-footer__lines,
html body .site-footer__hours,
html body .site-footer .opening-text,
html body .site-footer .opening-day,
html body .site-footer .opening-day-label,
html body .site-footer .opening-row {
  font-size: 18px !important;
  line-height: 1.65 !important;
}
html body .site-footer .opening-phrase,
html body .site-footer .opening-phrase--closed,
html body .site-footer .opening-phrase--kitchen,
html body .site-footer .opening-phrase--restaurant,
html body .site-footer .opening-status,
html body .site-footer .opening-status--kitchen,
html body .site-footer .opening-status--restaurant,
html body .site-footer .badge--gold {
  font-size: 18px !important;
  line-height: 1.35 !important;
}
html body .site-footer__col .social-list {
  justify-content: flex-start !important;
}