/* Eingangs-Animationen für die Bento-Karten · Variante über body[data-anim] */
@media (prefers-reduced-motion:no-preference){

  /* B · sanftes Aufblühen: Karten kommen aus der Tiefe, leicht unscharf */
  body[data-tab="hero"][data-anim="b"] .bento>.tile{clip-path:none;opacity:0;transform:translateY(12px) scale(.982);filter:blur(4px)}
  body[data-tab="hero"][data-anim="b"].anim-in .bento>.tile{opacity:1;transform:none;filter:blur(0);
    transition:opacity 1.5s cubic-bezier(.33,.72,.3,1),transform 1.9s cubic-bezier(.19,.9,.22,1),filter 1.5s cubic-bezier(.33,.72,.3,1)}
  body[data-tab="hero"][data-anim="b"].anim-in .bento>.tile:nth-child(1){transition-delay:.1s}
  body[data-tab="hero"][data-anim="b"].anim-in .bento>.tile:nth-child(2){transition-delay:.3s}
  body[data-tab="hero"][data-anim="b"].anim-in .bento>.tile:nth-child(3){transition-delay:.5s}
  body[data-tab="hero"][data-anim="b"].anim-in .bento>.tile:nth-child(4){transition-delay:.7s}

  /* C · Wischblende: Inhalt wird von links freigelegt, Karte bleibt stehen */
  body[data-tab="hero"][data-anim="c"] .bento>.tile{clip-path:inset(0 100% 0 0 round 20px);opacity:1;transform:none}
  body[data-tab="hero"][data-anim="c"] .bento>.tile>*{opacity:0;transform:translateX(-10px)}
  body[data-tab="hero"][data-anim="c"].anim-in .bento>.tile{clip-path:inset(0 0 0 0 round 20px);
    transition:clip-path 1.15s cubic-bezier(.76,0,.24,1)}
  body[data-tab="hero"][data-anim="c"].anim-in .bento>.tile>*{opacity:1;transform:none;
    transition:opacity .7s ease .25s,transform .9s cubic-bezier(.16,1,.3,1) .25s}
  body[data-tab="hero"][data-anim="c"].anim-in .bento>.tile:nth-child(1){transition-delay:0s}
  body[data-tab="hero"][data-anim="c"].anim-in .bento>.tile:nth-child(2){transition-delay:.14s}
  body[data-tab="hero"][data-anim="c"].anim-in .bento>.tile:nth-child(3){transition-delay:.28s}
  body[data-tab="hero"][data-anim="c"].anim-in .bento>.tile:nth-child(4){transition-delay:.42s}

  /* D · Raster setzt sich zusammen: jede Karte kommt von ihrer eigenen Seite */
  body[data-tab="hero"][data-anim="d"] .bento>.tile{clip-path:none;opacity:0}
  body[data-tab="hero"][data-anim="d"] .bento>.tile:nth-child(1){transform:translateX(-34px)}
  body[data-tab="hero"][data-anim="d"] .bento>.tile:nth-child(2){transform:translateY(-30px)}
  body[data-tab="hero"][data-anim="d"] .bento>.tile:nth-child(3){transform:translateY(30px)}
  body[data-tab="hero"][data-anim="d"] .bento>.tile:nth-child(4){transform:translateX(34px)}
  body[data-tab="hero"][data-anim="d"].anim-in .bento>.tile{opacity:1;transform:none;
    transition:opacity .7s ease,transform 1.05s cubic-bezier(.16,1,.3,1)}
  body[data-tab="hero"][data-anim="d"].anim-in .bento>.tile:nth-child(2){transition-delay:.1s}
  body[data-tab="hero"][data-anim="d"].anim-in .bento>.tile:nth-child(3){transition-delay:.18s}
  body[data-tab="hero"][data-anim="d"].anim-in .bento>.tile:nth-child(4){transition-delay:.26s}

  body[data-tab="hero"][data-anim].anim-in .bento>.tile:hover{transform:translateY(-4px)}
}

@media (prefers-reduced-motion:no-preference){
  /* B · Aufblühen für die Unterseiten: Blöcke kommen aus der Tiefe */
  body[data-anim="b"] .ueber>*,body[data-anim="b"] .kontakt>*,body[data-anim="b"] .lab-head,body[data-anim="b"] .lab-filter,body[data-anim="b"] .lab-grid>.acard,body[data-anim="b"] .werke .lab-head,body[data-anim="b"] .werke-cat{opacity:0;transform:translateY(18px) scale(.99);filter:blur(5px)}
  body[data-anim="b"].anim-in .ueber>*,body[data-anim="b"].anim-in .kontakt>*,body[data-anim="b"].anim-in .lab-head,body[data-anim="b"].anim-in .lab-filter,body[data-anim="b"].anim-in .lab-grid>.acard,body[data-anim="b"].anim-in .werke .lab-head,body[data-anim="b"].anim-in .werke-cat{opacity:1;transform:none;filter:blur(0);
    transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform 1.1s cubic-bezier(.16,1,.3,1),filter .9s ease}
  body[data-anim="b"].anim-in .ueber>:nth-child(1),body[data-anim="b"].anim-in .kontakt>:nth-child(1),body[data-anim="b"].anim-in .lab-grid>.acard:nth-child(1),body[data-anim="b"].anim-in .werke-cat:nth-child(1){transition-delay:.14s}
  body[data-anim="b"].anim-in .ueber>:nth-child(2),body[data-anim="b"].anim-in .kontakt>:nth-child(2),body[data-anim="b"].anim-in .lab-grid>.acard:nth-child(2),body[data-anim="b"].anim-in .werke-cat:nth-child(2){transition-delay:.24s}
  body[data-anim="b"].anim-in .ueber>:nth-child(3),body[data-anim="b"].anim-in .kontakt>:nth-child(3),body[data-anim="b"].anim-in .lab-grid>.acard:nth-child(3),body[data-anim="b"].anim-in .werke-cat:nth-child(3){transition-delay:.34s}
  body[data-anim="b"].anim-in .ueber>:nth-child(4),body[data-anim="b"].anim-in .kontakt>:nth-child(4),body[data-anim="b"].anim-in .lab-grid>.acard:nth-child(4),body[data-anim="b"].anim-in .werke-cat:nth-child(4){transition-delay:.44s}
  body[data-anim="b"].anim-in .ueber>:nth-child(n+5),body[data-anim="b"].anim-in .kontakt>:nth-child(n+5),body[data-anim="b"].anim-in .lab-grid>.acard:nth-child(n+5),body[data-anim="b"].anim-in .werke-cat:nth-child(n+5){transition-delay:.54s}
}