/* ============================================================
   APPLE DESIGN LAYER
   Fluid-interface Regeln (WWDC "Designing Fluid Interfaces",
   "Details of UI Typography", "Principles of Great Design")
   auf das bestehende kirrovo-CSS angewandt.
   Bewusst als letzter Block: gewinnt die Kaskade, ohne die
   vorhandenen Regeln anzufassen.
   ============================================================ */

/* --- 1. Response: Latenz raus, Feedback beim Druck ----------
   Kein 300ms-Tap-Delay, kein Text-Selektieren beim Wischen.  */
.btn,.btn-glow,.site-header__cta,.site-header__nav a,.site-mobile-menu a,
.faq-q,.site-menu-toggle,.pillar-card,.compare-card,.team-card,.adfolder-card{
  touch-action:manipulation;
}
.site-mobile-menu,.site-menu-toggle{-webkit-tap-highlight-color:transparent}

/* --- 2. Timing: Hover schnell, Druck sofort -----------------
   Vorher 450-650ms auf Hover/Press. Das liest sich als Lag.
   Apple-Response fuer UI-Feedback: 0.15-0.25s, Druck < 0.1s.  */
.btn{
  transition:transform .22s cubic-bezier(.22,1,.36,1),
             background-color .22s cubic-bezier(.22,1,.36,1),
             border-color .22s cubic-bezier(.22,1,.36,1),
             box-shadow .22s cubic-bezier(.22,1,.36,1);
}
.btn .arr,.btn-ink .arr{transition:transform .22s cubic-bezier(.22,1,.36,1)}
.site-header__cta{
  transition:transform .2s cubic-bezier(.22,1,.36,1),
             background-color .2s ease,box-shadow .2s ease;
}
.site-header__nav a{transition:color .15s ease}
.btn-glow{
  transition:transform .22s cubic-bezier(.22,1,.36,1),
             background-color .22s cubic-bezier(.22,1,.36,1),
             box-shadow .22s cubic-bezier(.22,1,.36,1);
}
.faq-q{transition:opacity .18s ease,color .18s ease}
/* Die Karten tragen zusaetzlich .reveal.reveal-pending (0,2,0) fuer den
   Einblend-Effekt. Erst nach dem Reveal auf Interaktions-Timing gehen,
   damit die Entrance-Animation ihre Ruhe behaelt.                      */
.pillar-card,
.pillar-card.reveal.visible{
  transition:transform .3s cubic-bezier(.22,1,.36,1),
             box-shadow .3s cubic-bezier(.22,1,.36,1);
}
.compare-card,.team-card,.step,.faq-ico,.adfolder-card{
  transition-duration:.25s;
  transition-timing-function:cubic-bezier(.22,1,.36,1);
}

/* Druck-Feedback: schnell rein (90ms), langsamer raus.
   Gilt jetzt auch fuer Karten, Nav- und Menue-Links.         */
.btn:active,.btn-glow:active,.site-header__cta:active,
#cta .cta-btns .btn:active{transition-duration:.09s}
.pillar-card:active,.compare-card:active,.team-card:active,.adfolder-card:active{
  transform:scale(.99);
  transition-duration:.09s;
}
.site-header__nav a:active,.site-mobile-menu a:active,.faq-q:active{
  opacity:.62;
  transition-duration:.06s;
}
.site-menu-toggle:active span{transform:scale(.9)}

/* --- 3. Material & Tiefe ------------------------------------
   Helle Kante oben = Licht, das sich im Material faengt.      */
.site-header{
  border-top-color:rgba(255,255,255,.75);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
}
/* Grosse Flaeche = dickeres Material: staerkerer Blur als der
   Header-Pill, plus Materialisieren statt reinem Ausblenden.  */
.site-menu-overlay{
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  transition:opacity .32s cubic-bezier(.22,1,.36,1),
             backdrop-filter .32s cubic-bezier(.22,1,.36,1),
             -webkit-backdrop-filter .32s cubic-bezier(.22,1,.36,1),
             visibility .32s;
}
.site-menu-overlay.is-open{
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* --- 4. Menue: interruptierbar + zieh-bar -------------------
   Basis-Transition bleibt fuer den Klick-Pfad. Waehrend einer
   Geste setzt JS .is-dragging und schaltet sie ab (1:1), beim
   Loslassen uebernimmt eine Feder mit der Finger-Geschwindigkeit. */
.site-mobile-menu{
  transform:translate3d(var(--menu-x,100%),0,0);
  transition:transform .38s cubic-bezier(.22,1,.36,1);
  touch-action:pan-y;
  will-change:transform;
}
.site-mobile-menu.is-open{transform:translate3d(var(--menu-x,0px),0,0)}
.site-mobile-menu.is-dragging,
.site-mobile-menu.is-springing{transition:none}
.site-menu-overlay.is-dragging,
.site-menu-overlay.is-springing{transition:none}
/* Greifkante: schmaler Streifen links am Panel zum Aufziehen. */
.site-mobile-menu::before{
  content:"";
  position:absolute;
  top:0;left:-18px;bottom:0;width:18px;
}

/* --- 5. Reduced Motion: vollstaendig ------------------------
   Die bestehenden Blocks lassen mehrere Endlos-Schleifen und
   den Blur-Reveal stehen. Hier komplett abgeraeumt.           */
@media(prefers-reduced-motion:reduce){
  .hero-route-node,.journey-transfer,.process-status,
  .journey-connector,.journey-call-ring,.journey-card,
  [class*="journey-"],[class*="process-status"],[class*="hero-route"]{
    animation:none !important;
  }
  .reveal,.reveal.reveal-pending,.reveal.reveal-pending.visible{
    filter:none !important;
    transform:none !important;
    transition:opacity .2s ease !important;
  }
  .site-mobile-menu,.site-menu-overlay{transition:opacity .2s ease}
  .site-mobile-menu{transform:translate3d(100%,0,0)}
  .site-mobile-menu.is-open{transform:translate3d(0,0,0)}
  .pillar-card:active,.compare-card:active,.team-card:active,
  .adfolder-card:active{transform:none}
}

/* --- 6. Reduced Transparency -------------------------------
   7 Flaechen nutzen backdrop-filter, bisher ohne Fallback.    */
@media(prefers-reduced-transparency:reduce){
  .site-header{
    background:#fff;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-color:rgba(20,24,31,.14);
  }
  .site-menu-overlay,.site-menu-overlay.is-open{
    background:rgba(20,24,31,.62);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  [style*="backdrop-filter"],.mob-overlay{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

/* --- 7. Mehr Kontrast --------------------------------------- */
@media(prefers-contrast:more){
  .site-header{background:#fff;border-color:var(--ink,#14181f)}
  .site-header__nav a{color:var(--ink,#14181f)}
  .site-mobile-menu{border-left-color:var(--ink,#14181f)}
  .site-menu-overlay,.site-menu-overlay.is-open{background:rgba(20,24,31,.78)}
  .btn-line{border-color:var(--ink,#14181f)}
}