/* ===== 03-effects-responsive.css ===== */

/* Fly-In: von links/rechts einfliegen */
.fly {
  opacity: 0;
  transform: translateX(var(--fly-x, 0));
  transition: opacity .45s ease, transform .55s ease;
  will-change: transform, opacity;
}

.fly.from-left {
  --fly-x: -48px;
}

.fly.from-right {
  --fly-x: 48px;
}

.fly.in {
  opacity: 1;
  transform: translateX(0);
}

/* Hover-Effekte für Kacheln */
@media (hover:hover) {

  .card,
  .pcb-card,
  .t-card {
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease, background-color .25s ease;
  }

  .card:hover,
  .t-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(15, 26, 43, .14), 0 6px 14px rgba(15, 26, 43, .10);
    border-color: rgba(0, 0, 0, .18);
  }

  .pcb-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .20);
    border-color: color-mix(in oklab, var(--pcb-mask), #fff 18%);
  }

  .pcb-card:hover::before {
    opacity: .28;
  }
}

/* Dezenter Active-Zustand */
.card:active,
.pcb-card:active,
.t-card:active {
  transform: translateY(-2px);
}

/* Bewegungsreduktion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Responsive ===== */
@media (max-width: 1080px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .cta .cta-inner {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact .form-row {
    grid-template-columns: 1fr;
  }
}

/* Mobile-Dropdown / Navigation <= 1600px (standard: fixed) */
@media (max-width: 1600px) {
  .menu {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    display: none;
    /* Sichtbarkeit via [aria-expanded] */
    flex-direction: column;
    gap: 0;
    background: #ffffff !important;
    /* nahezu blickdicht */
    backdrop-filter: none;
    border-top: 1px solid #e0e7ef;
    padding: 10px 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
    z-index: 3900;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }

  .dark .menu {
    background: #0b1220 !important;
    border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
  }

  .menu[aria-expanded="true"] {
    display: flex;
  }

  .menu-toggle {
    display: inline-block;
  }

  .lg-only,
  .sm-hide {
    display: none;
  }

  .menu a {
    color: var(--text);
    padding: 14px 20px;
    text-decoration: none;
    border-bottom: 1px solid #e9eef5;
  }

  .dark .menu a {
    color: #e6eef8;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }

  .menu a:hover {
    background: #f4f7fb;
  }

  .dark .menu a:hover {
    background: rgba(255, 255, 255, .06);
  }
}

/* ===== iOS Stacking-/Position-Fix ===== */
/* Header/Menu über Backdrop */
.site-header {
  z-index: 7000;
}

@media (max-width:1600px) {
  .menu {
    z-index: 7001;
  }
}

/* Header darf Kinder nicht clippen */
.site-header .inner {
  overflow: visible;
}

/* iOS-WebKit: fixed+blur Bug umgehen → absolute unter dem Header */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 1600px) {
    .menu {
      position: absolute;
      top: var(--header-h);
      left: 0;
      right: 0;
    }
  }
}