/* ============================================================================
   IBZ MOTION LIBRARY — 100 Transitions
   ----------------------------------------------------------------------------
   Kategorien (je 10):
   A. Page   B. Preloader   C. Hero   D. Reveal   E. Cards
   F. Buttons  G. Nav/Links  H. Gallery/Lightbox  I. Forms  J. Ambient
   ----------------------------------------------------------------------------
   Nutzung:
   - Scroll-Reveal:   <el data-tx-reveal="up|down|left|right|zoom|blur|flip|rotate|clip|pop"
                          data-tx-delay="120">   (Delays in ms, optional)
   - Micro-Klassen:   class="... tx-bt-shine tx-cd-lift"  bzw. cd-/bt-/nv-/fm-/lb-/am-
   - Page-Transition: JS setzt #ibz-transition-overlay[data-pt="fade|zoom|blur|..."]
   - Hero-Intro:      data-tx-reveal reicht; .hi-*-Klassen fuer direkte Animation
   - Ripple:          data-tx-ripple  |  Tilt: data-tx-tilt  |  Count: data-tx-count
   - Split:           data-tx-split (wird von JS in Woerter zerlegt, Stagger)
   - Marquee:         data-tx-marquee (Inhalt wird von JS dupliziert)
   ----------------------------------------------------------------------------
   Respektiert prefers-reduced-motion (global deaktiviert).
   ============================================================================ */

:root {
  --tx-fast: 0.18s;
  --tx-med: 0.35s;
  --tx-slow: 0.6s;
  --tx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tx-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tx-dur: var(--tx-med);
  --tx-delay: 0s;
  --tx-rx: 0deg;
  --tx-ry: 0deg;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-tx-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   A. PAGE TRANSITIONS — Overlay-Varianten (12)
   Basis: #ibz-transition-overlay slide-up (style.css). Varianten via [data-pt]
   ══════════════════════════════════════════════════════════════════════════ */

/* 01. slide-up   (Default — bereits in style.css) */
/* 02. slide-down */
#ibz-transition-overlay[data-pt="slide-down"] {
  transform: translateY(-101%);
}
#ibz-transition-overlay[data-pt="slide-down"].is-leaving {
  transform: translateY(101%);
}

/* 03. fade */
#ibz-transition-overlay[data-pt="fade"] {
  transform: none !important;
  opacity: 0;
  transition: opacity 0.5s var(--tx-ease);
}
#ibz-transition-overlay[data-pt="fade"].is-preloader,
#ibz-transition-overlay[data-pt="fade"].is-active {
  opacity: 1;
}
#ibz-transition-overlay[data-pt="fade"].is-leaving {
  opacity: 0;
}

/* 04. zoom */
#ibz-transition-overlay[data-pt="zoom"] {
  transform: scale(0.94) !important;
  opacity: 0;
  transition: transform 0.5s var(--tx-ease), opacity 0.5s var(--tx-ease);
}
#ibz-transition-overlay[data-pt="zoom"].is-preloader,
#ibz-transition-overlay[data-pt="zoom"].is-active {
  transform: scale(1) !important;
  opacity: 1;
}
#ibz-transition-overlay[data-pt="zoom"].is-leaving {
  transform: scale(1.05) !important;
  opacity: 0;
}

/* 05. blur */
#ibz-transition-overlay[data-pt="blur"] {
  transform: none !important;
  opacity: 0;
  filter: blur(18px);
  transition: opacity 0.55s var(--tx-ease), filter 0.55s var(--tx-ease);
}
#ibz-transition-overlay[data-pt="blur"].is-preloader,
#ibz-transition-overlay[data-pt="blur"].is-active {
  opacity: 1;
  filter: blur(0);
}
#ibz-transition-overlay[data-pt="blur"].is-leaving {
  opacity: 0;
  filter: blur(14px);
}

/* 06. wipe */
#ibz-transition-overlay[data-pt="wipe"] {
  transform: none !important;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.55s var(--tx-ease);
}
#ibz-transition-overlay[data-pt="wipe"].is-preloader,
#ibz-transition-overlay[data-pt="wipe"].is-active {
  clip-path: inset(0 0 0 0);
}
#ibz-transition-overlay[data-pt="wipe"].is-leaving {
  clip-path: inset(0 0 0 100%);
}

/* 07. circle */
#ibz-transition-overlay[data-pt="circle"] {
  transform: none !important;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.6s var(--tx-ease);
}
#ibz-transition-overlay[data-pt="circle"].is-preloader,
#ibz-transition-overlay[data-pt="circle"].is-active {
  clip-path: circle(150% at 50% 50%);
}
#ibz-transition-overlay[data-pt="circle"].is-leaving {
  clip-path: circle(0% at 50% 50%);
}

/* 08. flip */
#ibz-transition-overlay[data-pt="flip"] {
  transform: perspective(1200px) rotateX(90deg) !important;
  transform-origin: top center;
  transition: transform 0.6s var(--tx-ease);
}
#ibz-transition-overlay[data-pt="flip"].is-preloader,
#ibz-transition-overlay[data-pt="flip"].is-active {
  transform: perspective(1200px) rotateX(0deg) !important;
}
#ibz-transition-overlay[data-pt="flip"].is-leaving {
  transform: perspective(1200px) rotateX(-90deg) !important;
  transform-origin: bottom center;
}

/* 09. 3d */
#ibz-transition-overlay[data-pt="3d"] {
  transform: perspective(1000px) translateZ(-700px) !important;
  opacity: 0;
  transition: transform 0.6s var(--tx-ease), opacity 0.5s var(--tx-ease);
}
#ibz-transition-overlay[data-pt="3d"].is-preloader,
#ibz-transition-overlay[data-pt="3d"].is-active {
  transform: perspective(1000px) translateZ(0) !important;
  opacity: 1;
}
#ibz-transition-overlay[data-pt="3d"].is-leaving {
  transform: perspective(1000px) translateZ(-700px) !important;
  opacity: 0;
}

/* 10. fold */
#ibz-transition-overlay[data-pt="fold"] {
  transform: perspective(1200px) rotateY(90deg) !important;
  transform-origin: left center;
  transition: transform 0.6s var(--tx-ease);
}
#ibz-transition-overlay[data-pt="fold"].is-preloader,
#ibz-transition-overlay[data-pt="fold"].is-active {
  transform: perspective(1200px) rotateY(0deg) !important;
}
#ibz-transition-overlay[data-pt="fold"].is-leaving {
  transform: perspective(1200px) rotateY(-90deg) !important;
  transform-origin: right center;
}

/* 11. bounce */
#ibz-transition-overlay[data-pt="bounce"] {
  transform: none !important;
  opacity: 0;
  transition: opacity 0.45s var(--tx-ease);
}
#ibz-transition-overlay[data-pt="bounce"].is-preloader,
#ibz-transition-overlay[data-pt="bounce"].is-active {
  animation: tx-pt-bounce-in 0.6s var(--tx-spring) both;
  opacity: 1;
}
#ibz-transition-overlay[data-pt="bounce"].is-leaving {
  animation: tx-pt-bounce-out 0.4s var(--tx-ease) both;
  opacity: 0;
}
@keyframes tx-pt-bounce-in {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes tx-pt-bounce-out {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.08); opacity: 0; }
}

/* 12. shrink */
#ibz-transition-overlay[data-pt="shrink"] {
  transform: none !important;
  opacity: 0;
  transition: opacity 0.45s var(--tx-ease);
}
#ibz-transition-overlay[data-pt="shrink"].is-preloader,
#ibz-transition-overlay[data-pt="shrink"].is-active {
  opacity: 1;
}
#ibz-transition-overlay[data-pt="shrink"].is-leaving {
  animation: tx-pt-shrink 0.45s var(--tx-ease) both;
}
@keyframes tx-pt-shrink {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   B. PRELOADER — Micro (10)
   ══════════════════════════════════════════════════════════════════════════ */

/* 13. pl-breathe — Logo atmet (entspricht bestehendem ibz-preloader-breathe) */
.tx-pl-breathe { animation: ibz-preloader-breathe 2.2s ease-in-out infinite; }

/* 14. pl-drop — Logo faellt federnd ein */
.tx-pl-drop { animation: tx-pl-drop 0.9s var(--tx-spring) both; }
@keyframes tx-pl-drop {
  0%   { transform: translateY(-80px) scale(1.1); opacity: 0; }
  55%  { transform: translateY(6px) scale(1); opacity: 1; }
  80%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* 15. pl-layer — Layer-Stagger (Alias fuer .ibz-logo-layer) */
.tx-pl-layer { animation: tx-pl-layer-in 0.7s var(--tx-ease) both calc(var(--ibz-i, 0) * 55ms); }
@keyframes tx-pl-layer-in {
  0%   { opacity: 0; transform: translateY(16px) scale(0.9); }
  100% { opacity: 1; transform: none; }
}

/* 16. pl-bar — Fortschrittsbalken */
.tx-pl-bar { animation: tx-pl-bar 1.2s var(--tx-ease) infinite; transform-origin: left center; }
@keyframes tx-pl-bar {
  0%   { transform: scaleX(0); }
  50%  { transform: scaleX(0.7); }
  100% { transform: scaleX(1); }
}

/* 17. pl-dots — Drei-Punkte-Loader */
.tx-pl-dots { display: inline-flex; gap: 0.4rem; }
.tx-pl-dots span {
  width: 0.55rem; height: 0.55rem; border-radius: 9999px;
  background: currentColor; opacity: 0.3;
  animation: tx-pl-dot 1s var(--tx-ease) infinite;
}
.tx-pl-dots span:nth-child(2) { animation-delay: 0.15s; }
.tx-pl-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes tx-pl-dot {
  0%, 100% { transform: translateY(0); opacity: 0.3; }
  50%      { transform: translateY(-6px); opacity: 1; }
}

/* 18. pl-ping — Pulsring */
.tx-pl-ping { position: relative; }
.tx-pl-ping::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 2px solid currentColor;
  animation: tx-pl-ping 1.4s var(--tx-ease) infinite;
}
@keyframes tx-pl-ping {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* 19. pl-spin — Spinner-Ring */
.tx-pl-spin {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: tx-spin 0.8s linear infinite;
}

/* 20. pl-pulse — weicher Puls */
.tx-pl-pulse { animation: tx-pl-pulse 1.6s ease-in-out infinite; }
@keyframes tx-pl-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.75; transform: scale(0.96); }
}

/* 21. pl-spring — Overshoot-Ein */
.tx-pl-spring { animation: tx-pl-spring 0.8s var(--tx-spring) both; }
@keyframes tx-pl-spring {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 22. pl-fade — sanftes Einblenden */
.tx-pl-fade { animation: tx-fade-in 0.7s var(--tx-ease) both; }

/* ══════════════════════════════════════════════════════════════════════════
   C. HERO / INTRO — Elemente (10)
   ══════════════════════════════════════════════════════════════════════════ */

/* 23. hi-drop — Eyebrow/kleine Elemente fallen ein */
.tx-hi-drop { animation: tx-hi-drop 0.7s var(--tx-spring) both; }
@keyframes tx-hi-drop {
  0%   { transform: translateY(-26px); opacity: 0; }
  60%  { transform: translateY(4px); opacity: 1; }
  100% { transform: translateY(0); }
}

/* 24. hi-rise — Hoch + Blur-Effekt (Headline) */
.tx-hi-rise { animation: tx-hi-rise 0.8s var(--tx-ease) both; }
@keyframes tx-hi-rise {
  0%   { transform: translateY(32px); opacity: 0; filter: blur(6px); }
  100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}

/* 25. hi-flip — RotateX-Klappe */
.tx-hi-flip { animation: tx-hi-flip 0.9s var(--tx-ease) both; transform-origin: top center; }
@keyframes tx-hi-flip {
  0%   { transform: perspective(800px) rotateX(80deg); opacity: 0; }
  100% { transform: perspective(800px) rotateX(0); opacity: 1; }
}

/* 26. hi-pop — federnder Pop */
.tx-hi-pop { animation: tx-hi-pop 0.7s var(--tx-spring) both; }
@keyframes tx-hi-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

/* 27. hi-zoom — langsam heranzoomen */
.tx-hi-zoom { animation: tx-hi-zoom 1s var(--tx-ease) both; }
@keyframes tx-hi-zoom {
  0%   { transform: scale(0.86); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 28. hi-letter — Buchstaben-Stagger (JS zerlegt [data-tx-split]="letter") */
.tx-letter { display: inline-block; opacity: 0; animation: tx-hi-letter 0.6s var(--tx-spring) both calc(var(--tx-delay, 0s) + var(--tx-i, 0) * 35ms); }
@keyframes tx-hi-letter {
  0%   { transform: translateY(0.6em) rotate(6deg); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* 29. hi-word — Wort-Stagger */
.tx-word { display: inline-block; opacity: 0; animation: tx-hi-word 0.7s var(--tx-ease) both calc(var(--tx-delay, 0s) + var(--tx-i, 0) * 90ms); }
@keyframes tx-hi-word {
  0%   { transform: translateY(0.8em); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* 30. hi-badge — Eyebrow-Badge */
.tx-hi-badge { animation: tx-hi-badge 0.6s var(--tx-spring) both; }
@keyframes tx-hi-badge {
  0%   { transform: translateY(-14px) scale(0.9); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* 31. hi-float — schwebende Deko */
.tx-hi-float { animation: tx-am-float 6s ease-in-out infinite; }

/* 32. hi-draw — Unterstreichung zeichnet sich */
.tx-hi-draw { position: relative; }
.tx-hi-draw::after {
  content: "";
  position: absolute; left: 0; bottom: 0.05em;
  width: 100%; height: 0.12em;
  background: currentColor;
  transform-origin: left center;
  animation: tx-hi-draw 1s var(--tx-ease) both calc(var(--tx-delay, 0s) + 0.3s);
}
@keyframes tx-hi-draw {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* ══════════════════════════════════════════════════════════════════════════
   D. SCROLL REVEAL (10) — via [data-tx-reveal="..."] + IntersectionObserver
   ══════════════════════════════════════════════════════════════════════════ */

[data-tx-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--tx-med, 0.35s) var(--tx-ease, cubic-bezier(0.22, 1, 0.36, 1)) var(--tx-delay, 0s),
    transform var(--tx-med, 0.35s) var(--tx-ease, cubic-bezier(0.22, 1, 0.36, 1)) var(--tx-delay, 0s),
    filter var(--tx-med, 0.35s) var(--tx-ease, cubic-bezier(0.22, 1, 0.36, 1)) var(--tx-delay, 0s),
    clip-path var(--tx-med, 0.35s) var(--tx-ease, cubic-bezier(0.22, 1, 0.36, 1)) var(--tx-delay, 0s);
  will-change: transform, opacity, filter;
}

/* 33. up (Default) */
/* 34. down */
[data-tx-reveal="down"] { transform: translateY(-28px); }
/* 35. left */
[data-tx-reveal="left"] { transform: translateX(34px); }
/* 36. right */
[data-tx-reveal="right"] { transform: translateX(-34px); }
/* 37. zoom */
[data-tx-reveal="zoom"] { transform: scale(0.92); }
/* 38. blur */
[data-tx-reveal="blur"] { transform: translateY(18px); filter: blur(10px); }
/* 39. flip */
[data-tx-reveal="flip"] { transform: perspective(800px) rotateX(70deg); transform-origin: top center; }
/* 40. rotate */
[data-tx-reveal="rotate"] { transform: rotate(-7deg) translateY(22px); }
/* 41. clip */
[data-tx-reveal="clip"] { transform: none; clip-path: inset(0 0 100% 0); }
/* 42. pop */
[data-tx-reveal="pop"] { transform: scale(1.14); }

[data-tx-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* ══════════════════════════════════════════════════════════════════════════
   E. CARD MICRO (10) — hover/interaction
   ══════════════════════════════════════════════════════════════════════════ */

/* 43. cd-lift */
.tx-cd-lift { transition: transform var(--tx-med) var(--tx-ease), box-shadow var(--tx-med) var(--tx-ease); }
.tx-cd-lift:hover { transform: translateY(-6px); }

/* 44. cd-tilt */
.tx-cd-tilt { transition: transform 0.4s var(--tx-ease), box-shadow 0.4s var(--tx-ease); }
.tx-cd-tilt:hover { transform: translateY(-3px) rotate(-0.7deg); }

/* 45. cd-glow — Brand-Glow (teal/orange je .tx-cd-glow--teal/--orange) */
.tx-cd-glow { transition: box-shadow var(--tx-med) var(--tx-ease), transform var(--tx-med) var(--tx-ease); }
.tx-cd-glow:hover { box-shadow: 0 16px 44px -14px rgba(0, 178, 192, 0.45); transform: translateY(-4px); }
.tx-cd-glow--orange:hover { box-shadow: 0 16px 44px -14px rgba(226, 98, 44, 0.5); }

/* 46. cd-shine — Lichtstreifen */
.tx-cd-shine { position: relative; overflow: hidden; }
.tx-cd-shine::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--tx-ease);
  pointer-events: none;
}
.tx-cd-shine:hover::after { transform: translateX(120%); }

/* 47. cd-border — Border leuchtet auf */
.tx-cd-border { transition: border-color var(--tx-med) var(--tx-ease), box-shadow var(--tx-med) var(--tx-ease); }
.tx-cd-border:hover { border-color: rgba(0, 178, 192, 0.6); box-shadow: 0 0 0 3px rgba(0, 178, 192, 0.12); }

/* 48. cd-image-zoom — Bild zoomen */
.tx-cd-image-zoom img { transition: transform 0.6s var(--tx-ease); }
.tx-cd-image-zoom:hover img { transform: scale(1.07); }

/* 49. cd-image-pan — Bild wandert */
.tx-cd-image-pan img { transition: transform 0.9s var(--tx-ease); }
.tx-cd-image-pan:hover img { transform: scale(1.12) translate(2%, -2%); }

/* 50. cd-scale */
.tx-cd-scale { transition: transform var(--tx-med) var(--tx-ease); }
.tx-cd-scale:hover { transform: scale(1.025); }

/* 51. cd-float — sanftes Schwebeloop */
.tx-cd-float { animation: tx-am-float 5s ease-in-out infinite; }

/* 52. cd-shadow — Tiefe */
.tx-cd-shadow { transition: box-shadow var(--tx-med) var(--tx-ease), transform var(--tx-med) var(--tx-ease); }
.tx-cd-shadow:hover { box-shadow: 0 24px 60px -20px rgba(22, 41, 79, 0.35); transform: translateY(-5px); }

/* ══════════════════════════════════════════════════════════════════════════
   F. BUTTON / PILL (10)
   ══════════════════════════════════════════════════════════════════════════ */

/* 53. bt-pulse — Pulsring */
.tx-bt-pulse { position: relative; z-index: 0; }
.tx-bt-pulse::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(226, 98, 44, 0.55);
  animation: tx-bt-pulse 2s var(--tx-ease) infinite;
}
@keyframes tx-bt-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(226, 98, 44, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(226, 98, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(226, 98, 44, 0); }
}

/* 54. bt-shine — Lichtstreifen */
.tx-bt-shine { position: relative; overflow: hidden; }
.tx-bt-shine::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.5) 50%, transparent 60%);
  transform: translateX(-130%);
  transition: transform 0.6s var(--tx-ease);
  pointer-events: none;
}
.tx-bt-shine:hover::after { transform: translateX(130%); }

/* 55. bt-wiggle */
.tx-bt-wiggle:hover { animation: tx-bt-wiggle 0.4s var(--tx-ease); }
@keyframes tx-bt-wiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-2.5deg); }
  75%      { transform: rotate(2.5deg); }
}

/* 56. bt-bounce */
.tx-bt-bounce:hover { animation: tx-bt-bounce 0.5s var(--tx-ease); }
@keyframes tx-bt-bounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-4px); }
  50%  { transform: translateY(0); }
  70%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

/* 57. bt-grow */
.tx-bt-grow { transition: transform var(--tx-med) var(--tx-spring); }
.tx-bt-grow:hover { transform: scale(1.05); }
.tx-bt-grow:active { transform: scale(0.97); }

/* 58. bt-jitter */
.tx-bt-jitter:hover { animation: tx-bt-jitter 0.35s linear; }
@keyframes tx-bt-jitter {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-2px); }
  40%      { transform: translateX(2px); }
  60%      { transform: translateX(-1px); }
  80%      { transform: translateX(1px); }
}

/* 59. bt-ripple — Welle (JS erzeugt span.ibz-ripple) */
.ibz-ripple {
  position: absolute;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.55);
  transform: scale(0);
  animation: tx-ripple 0.65s var(--tx-ease) forwards;
  pointer-events: none;
}
@keyframes tx-ripple {
  to { transform: scale(4); opacity: 0; }
}
.tx-bt-ripple { position: relative; overflow: hidden; }

/* 60. bt-fill — Farbe fuellt von unten */
.tx-bt-fill { position: relative; z-index: 0; }
.tx-bt-fill::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: currentColor;
  opacity: 0.14;
  transform: translateY(101%);
  transition: transform 0.4s var(--tx-ease);
}
.tx-bt-fill:hover::before { transform: translateY(0); }

/* 61. bt-spark — Glow-Dot */
.tx-bt-spark { position: relative; }
.tx-bt-spark::after {
  content: "";
  position: absolute; top: -0.15rem; right: -0.15rem;
  width: 0.5rem; height: 0.5rem;
  border-radius: 9999px;
  background: #e2a12c;
  animation: tx-pl-ping 1.8s var(--tx-ease) infinite;
}

/* 62. bt-pop — Druckpunkt */
.tx-bt-pop { transition: transform 0.15s var(--tx-ease); }
.tx-bt-pop:hover { transform: scale(1.04); }
.tx-bt-pop:active { transform: scale(0.93); }

/* ══════════════════════════════════════════════════════════════════════════
   G. NAV / LINKS (10)
   ══════════════════════════════════════════════════════════════════════════ */

/* 63. nv-underline — Unterstreichung zeichnet */
.tx-nv-underline { position: relative; }
.tx-nv-underline::after {
  content: "";
  position: absolute; left: 0; bottom: -0.25em;
  width: 100%; height: 2px;
  border-radius: 9999px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.35s var(--tx-ease);
}
.tx-nv-underline:hover::after,
.tx-nv-underline:focus-visible::after { transform: scaleX(1); transform-origin: left center; }

/* 64. nv-fade — Listenelemente blenden ein */
.tx-nv-fade { transition: opacity var(--tx-med) var(--tx-ease), transform var(--tx-med) var(--tx-ease); }
.tx-nv-fade:hover { opacity: 0.7; }

/* 65. nv-stagger — Kinder stapeln (Dropdown) */
.tx-nv-stagger > * {
  opacity: 0;
  animation: tx-nv-stagger 0.4s var(--tx-ease) both calc(var(--tx-i, 0) * 60ms);
}
@keyframes tx-nv-stagger {
  0%   { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: none; }
}

/* 66. nv-dot — Punkt erscheint */
.tx-nv-dot { position: relative; }
.tx-nv-dot::before {
  content: "";
  position: absolute; left: -0.9em; top: 50%;
  width: 0.35rem; height: 0.35rem;
  border-radius: 9999px;
  background: #e2a12c;
  transform: translateY(-50%) scale(0);
  transition: transform 0.3s var(--tx-spring);
}
.tx-nv-dot:hover::before { transform: translateY(-50%) scale(1); }

/* 67. nv-pill — Pill waechst hinter dem Text */
.tx-nv-pill { position: relative; z-index: 0; }
.tx-nv-pill::before {
  content: "";
  position: absolute; inset: -0.35em -0.7em; z-index: -1;
  border-radius: 9999px;
  background: rgba(0, 178, 192, 0.14);
  transform: scaleX(0);
  transition: transform 0.35s var(--tx-ease);
}
.tx-nv-pill:hover::before { transform: scaleX(1); }

/* 68. nv-slide — Text rutscht hoch (Doppelzeile noetig) */
.tx-nv-slide { overflow: hidden; display: inline-block; vertical-align: bottom; }
.tx-nv-slide > * { display: inline-block; transition: transform 0.4s var(--tx-ease); }
.tx-nv-slide > span:first-child { transform: translateY(0); }
.tx-nv-slide:hover > span:first-child { transform: translateY(-100%); }
.tx-nv-slide > span:last-child { position: absolute; transform: translateY(100%); }
.tx-nv-slide:hover > span:last-child { transform: translateY(0); }

/* 69. nv-arrow — Pfeil schiebt */
.tx-nv-arrow svg, .tx-nv-arrow .lucide {
  transition: transform 0.3s var(--tx-ease);
}
.tx-nv-arrow:hover svg, .tx-nv-arrow:hover .lucide { transform: translateX(4px); }

/* 70. nv-icon-spin — Icon dreht */
.tx-nv-icon-spin svg, .tx-nv-icon-spin .lucide { transition: transform 0.4s var(--tx-ease); }
.tx-nv-icon-spin:hover svg, .tx-nv-icon-spin:hover .lucide { transform: rotate(90deg); }

/* 71. nv-highlight — Farbe + Unterstreichung */
.tx-nv-highlight { transition: color var(--tx-med) var(--tx-ease); position: relative; }
.tx-nv-highlight::after {
  content: "";
  position: absolute; left: 0; bottom: -0.2em;
  width: 100%; height: 2px;
  background: #e2a12c;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--tx-ease);
}
.tx-nv-highlight:hover { color: #00b2c0; }
.tx-nv-highlight:hover::after { transform: scaleX(1); }

/* 72. nv-caret — Caret dreht (Akkordeon) */
.tx-nv-caret svg, .tx-nv-caret .lucide { transition: transform 0.3s var(--tx-ease); }
.tx-nv-caret[aria-expanded="true"] svg, .tx-nv-caret[aria-expanded="true"] .lucide { transform: rotate(180deg); }

/* ══════════════════════════════════════════════════════════════════════════
   H. GALLERY / LIGHTBOX (10)
   ══════════════════════════════════════════════════════════════════════════ */

/* 73. lb-zoom */
.tx-lb-zoom { animation: tx-lb-zoom 0.4s var(--tx-spring) both; }
@keyframes tx-lb-zoom { 0% { transform: scale(0.82); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* 74. lb-rotate */
.tx-lb-rotate { animation: tx-lb-rotate 0.55s var(--tx-ease) both; }
@keyframes tx-lb-rotate { 0% { transform: rotate(-8deg) scale(0.9); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* 75. lb-slide */
.tx-lb-slide { animation: tx-lb-slide 0.5s var(--tx-ease) both; }
@keyframes tx-lb-slide { 0% { transform: translateY(48px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* 76. lb-fade */
.tx-lb-fade { animation: tx-fade-in 0.5s var(--tx-ease) both; }

/* 77. lb-fall */
.tx-lb-fall { animation: tx-lb-fall 0.7s var(--tx-spring) both; }
@keyframes tx-lb-fall {
  0%   { transform: translateY(-120px) scale(1.08); opacity: 0; }
  60%  { transform: translateY(8px); opacity: 1; }
  100% { transform: none; }
}

/* 78. lb-spring */
.tx-lb-spring { animation: tx-pl-spring 0.55s var(--tx-spring) both; }

/* 79. lb-blur */
.tx-lb-blur { animation: tx-lb-blur 0.55s var(--tx-ease) both; }
@keyframes tx-lb-blur { 0% { filter: blur(16px); opacity: 0; transform: scale(1.04); } 100% { filter: blur(0); opacity: 1; } }

/* 80. lb-3d */
.tx-lb-3d { animation: tx-lb-3d 0.6s var(--tx-ease) both; transform-origin: center center; }
@keyframes tx-lb-3d {
  0%   { transform: perspective(900px) rotateY(35deg) scale(0.92); opacity: 0; }
  100% { transform: perspective(900px) rotateY(0) scale(1); opacity: 1; }
}

/* 81. lb-grow */
.tx-lb-grow { animation: tx-lb-grow 0.45s var(--tx-ease) both; }
@keyframes tx-lb-grow { 0% { transform: scale(0.55); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* 82. lb-caption — Caption gleitet nach */
.tx-lb-caption { animation: tx-lb-caption 0.5s var(--tx-ease) both calc(var(--tx-delay, 0s) + 0.15s); }
@keyframes tx-lb-caption { 0% { transform: translateY(12px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ══════════════════════════════════════════════════════════════════════════
   I. FORMS (10)
   ══════════════════════════════════════════════════════════════════════════ */

/* 83. fm-focus-glow */
.tx-fm-focus-glow { transition: box-shadow var(--tx-med) var(--tx-ease), border-color var(--tx-med) var(--tx-ease); }
.tx-fm-focus-glow:focus { box-shadow: 0 0 0 4px rgba(0, 178, 192, 0.18); border-color: rgba(0, 178, 192, 0.6); }

/* 84. fm-underline */
.tx-fm-underline { border: 0; border-bottom: 2px solid currentColor; border-radius: 0; transition: border-color var(--tx-med) var(--tx-ease); }
.tx-fm-underline:focus { border-color: #00b2c0; }

/* 85. fm-pop */
.tx-fm-pop { transition: transform var(--tx-med) var(--tx-spring); }
.tx-fm-pop:focus { transform: scale(1.02); }

/* 86. fm-shake — Fehler */
.tx-fm-shake { animation: tx-fm-shake 0.45s var(--tx-ease); }
@keyframes tx-fm-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-7px); }
  40%      { transform: translateX(7px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}

/* 87. fm-label-float — Label schwebt hoch */
.tx-fm-label-float { transition: transform var(--tx-med) var(--tx-ease), opacity var(--tx-med) var(--tx-ease), font-size var(--tx-med) var(--tx-ease); }
input:focus ~ .tx-fm-label-float,
input:not(:placeholder-shown) ~ .tx-fm-label-float {
  transform: translateY(-1.4em) scale(0.82);
  opacity: 0.75;
}

/* 88. fm-check-pop */
.tx-fm-check-pop { accent-color: #00b2c0; transition: transform var(--tx-med) var(--tx-spring); }
.tx-fm-check-pop:checked { transform: scale(1.2); }

/* 89. fm-radio-pop */
.tx-fm-radio-pop { accent-color: #e2622c; transition: transform var(--tx-med) var(--tx-spring); }
.tx-fm-radio-pop:checked { transform: scale(1.2); }

/* 90. fm-caret-rotate */
.tx-fm-caret-rotate { transition: transform 0.3s var(--tx-ease); }
.tx-fm-caret-rotate:focus { transform: rotate(180deg); }

/* 91. fm-btn-arrow — Pfeil im Submit schraegt vor */
.tx-fm-btn-arrow svg, .tx-fm-btn-arrow .lucide { transition: transform 0.3s var(--tx-ease); }
.tx-fm-btn-arrow:hover svg, .tx-fm-btn-arrow:hover .lucide { transform: translate(3px, -1px); }

/* 92. fm-success — Gruener Puls bei Erfolg */
.tx-fm-success { animation: tx-fm-success 1.2s var(--tx-ease); }
@keyframes tx-fm-success {
  0%   { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.5); }
  100% { box-shadow: 0 0 0 16px rgba(76, 175, 80, 0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   J. AMBIENT / DEKO (10)
   ══════════════════════════════════════════════════════════════════════════ */

/* 93. am-float */
.tx-am-float { animation: tx-am-float 6s ease-in-out infinite; }
@keyframes tx-am-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-14px) rotate(1.5deg); }
}

/* 94. am-pulse */
.tx-am-pulse { animation: tx-pl-pulse 2.4s ease-in-out infinite; }

/* 95. am-breathe */
.tx-am-breathe { animation: tx-am-breathe 3.6s ease-in-out infinite; }
@keyframes tx-am-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* 96. am-spin */
.tx-am-spin { animation: tx-spin 14s linear infinite; }
@keyframes tx-spin { to { transform: rotate(360deg); } }

/* 97. am-shimmer — Verlauf wandert */
.tx-am-shimmer {
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: tx-am-shimmer 2.8s linear infinite;
}
@keyframes tx-am-shimmer {
  0%   { background-position: 130% 0; }
  100% { background-position: -90% 0; }
}

/* 98. am-twinkle */
.tx-am-twinkle { animation: tx-am-twinkle 3.2s ease-in-out infinite; }
@keyframes tx-am-twinkle {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

/* 99. am-drift */
.tx-am-drift { animation: tx-am-drift 9s ease-in-out infinite; }
@keyframes tx-am-drift {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  33%      { transform: translate(10px, -8px) rotate(2deg); }
  66%      { transform: translate(-8px, 6px) rotate(-2deg); }
}

/* 100. am-marquee — Endloslauf (JS dupliziert [data-tx-marquee]-Inhalt) */
.tx-am-marquee { overflow: hidden; white-space: nowrap; }
.tx-am-marquee__track { display: inline-flex; gap: 2.5rem; padding-right: 2.5rem; animation: tx-am-marquee 22s linear infinite; }
.tx-am-marquee:hover .tx-am-marquee__track { animation-play-state: paused; }
@keyframes tx-am-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.tx-am-marquee--slow .tx-am-marquee__track { animation-duration: 40s; }
.tx-am-marquee--fast .tx-am-marquee__track { animation-duration: 12s; }

/* ── Shared Keyframes ─────────────────────────────────────────────────────── */

@keyframes tx-fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ── Tilt (JS setzt --tx-rx/--tx-ry) ─────────────────────────────────────── */
[data-tx-tilt] {
  transform: perspective(900px) rotateX(var(--tx-rx, 0deg)) rotateY(var(--tx-ry, 0deg));
  transition: transform 0.25s var(--tx-ease);
}
/* ══════════════════════════════════════════════════════════════════════════
   GLOBALE NACHREISTUNGEN — Leben auf der ganzen Seite
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Nav: Dropdown blendet sanft ein (Pill-Hover kommt aus dem Walker) ── */
.primary-menu .sub-menu {
  transform-origin: top center;
  animation: ibz-nav-drop 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ibz-nav-drop {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .primary-menu .sub-menu {
    animation: none !important;
  }
}

/* ── Formulare: Fokus-Glow, Check/Radio-Pop, Submit-Micro ── */
form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="search"]),
form textarea,
form select {
  transition: box-shadow 0.25s var(--tx-ease), border-color 0.25s var(--tx-ease), transform 0.25s var(--tx-spring);
}
form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="search"]):focus,
form textarea:focus,
form select:focus {
  box-shadow: 0 0 0 4px rgba(0, 178, 192, 0.16);
  border-color: rgba(0, 178, 192, 0.65);
}
form input[type="checkbox"],
form input[type="radio"] {
  accent-color: #00b2c0;
  transition: transform 0.25s var(--tx-spring);
}
form input[type="checkbox"]:checked,
form input[type="radio"]:checked {
  transform: scale(1.25);
}
form button[type="submit"] {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s var(--tx-spring), box-shadow 0.25s var(--tx-ease);
}
form button[type="submit"]:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 28px -10px rgba(22, 41, 79, 0.35);
}
form button[type="submit"]:active {
  transform: scale(0.96);
}

/* ── Social-Buttons: Pop + Rotate ── */
.social-icon,
.social-icons a,
.footer-social a {
  transition: transform 0.3s var(--tx-spring);
}
.social-icon:hover,
.social-icons a:hover,
.footer-social a:hover {
  transform: scale(1.14) rotate(6deg);
}

/* ── Footer-Links: dezenter Farbwechsel + Pfeil ── */
footer a {
  transition: color 0.25s var(--tx-ease);
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE TRANSITION v2 — elegantes Content-Crossfade (kein Deck-Overlay)
   ══════════════════════════════════════════════════════════════════════════ */

/* Neuer Seiteninhalt blendet sanft ein (Fade + Slide + Blur) */
body.ibz-pt-in > *:not(#ibz-transition-overlay) {
  animation: ibz-pt-in 0.5s var(--tx-ease) both;
}
@keyframes ibz-pt-in {
  from { opacity: 0; transform: translateY(16px); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Inhalt blendet vor der Navigation aus */
body.ibz-pt-out > *:not(#ibz-transition-overlay) {
  opacity: 0;
  transform: translateY(-10px);
  filter: blur(4px);
  transition: opacity 0.22s var(--tx-ease), transform 0.22s var(--tx-ease), filter 0.22s var(--tx-ease);
}

@media (prefers-reduced-motion: reduce) {
  body.ibz-pt-in > *:not(#ibz-transition-overlay),
  body.ibz-pt-out > *:not(#ibz-transition-overlay) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTON-MICROS — Hero-CTAs (Lift + Glow + Shine + Press) + generischer Druck
   ══════════════════════════════════════════════════════════════════════════ */

.dept-hero a.rounded-full {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 0.25s var(--tx-spring), box-shadow 0.25s var(--tx-ease);
}
.dept-hero a.rounded-full:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 34px -14px rgba(22, 41, 79, 0.5);
}
.dept-hero a.rounded-full:active {
  transform: translateY(-1px) scale(0.97);
  box-shadow: 0 6px 16px -8px rgba(22, 41, 79, 0.35);
}
.dept-hero a.rounded-full::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%);
  transform: translateX(-130%);
  transition: transform 0.6s var(--tx-ease);
  pointer-events: none;
}
.dept-hero a.rounded-full:hover::after {
  transform: translateX(130%);
}

/* Generischer Druckpunkt fuer alle Buttons */
button:active,
[role="button"]:active {
  transform: scale(0.96);
}

/* Pfeil-Links: Icon schiebt bei Hover (btn-fm-arrow, nv-arrow) */
a.rounded-full svg,
button[type="submit"] svg {
  transition: transform 0.3s var(--tx-ease);
}
a.rounded-full:hover svg,
button[type="submit"]:hover svg {
  transform: translateX(3px);
}

/* ══════════════════════════════════════════════════════════════════════════
   FLUID AREA-GRID — Hover-Karte waechst federnd, Nachbarn ziehen sich zurueck
   (scale getrennt von transform → Tilt bleibt fluessig; kein filter/will-change
    → keine Repaint-Stutters; nur auf feinen Zeigern)
   ══════════════════════════════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {
  .ibz-area-grid > a {
    scale: 1;
    transform: translateZ(0);
    transition:
      scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
      transform 0.25s var(--tx-ease),
      opacity 0.35s var(--tx-ease),
      box-shadow 0.4s var(--tx-ease);
  }

  .ibz-area-grid > a:hover {
    scale: 1.045;
    z-index: 5;
    box-shadow: 0 26px 54px -20px rgba(22, 41, 79, 0.5);
  }

  /* Nachbarn: nur Scale + Opacity (kein filter → billig und fluessig) */
  .ibz-area-grid:has(> a:hover) > a:not(:hover) {
    scale: 0.975;
    opacity: 0.78;
  }

  /* Icons: drehen + wachsen beim Hover */
  .ibz-area-grid > a .lucide,
  .ibz-area-grid > a svg {
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .ibz-area-grid > a:hover .lucide,
  .ibz-area-grid > a:hover svg {
    transform: rotate(10deg) scale(1.18);
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   RADIUS-KONSISTENZ — Buttons, Formulare, Kalender u.v.m. ohne Radius
   (Klassen wie rounded-full/rounded-lg/rounded-xl gewinnen durch hoehere
   Spezifitaet; diese Regeln decken alle "nackten" Elemente ab)
   ══════════════════════════════════════════════════════════════════════════ */

button {
  border-radius: 0.625rem;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="search"]),
select,
textarea {
  border-radius: 0.625rem;
}

/* FullCalendar-Toolbar + Events-Filter etc. */
.fc-button,
.fc .fc-button {
  border-radius: 0.5rem;
}

/* Links, die wie Buttons aussehen, aber keine Radius-Klasse tragen */
a[class*="bg-"]:not([class*="rounded"]),
a[class*="bg-"]:not([class*="rounded-full"]):not([class*="rounded-lg"]):not([class*="rounded-xl"]):not([class*="rounded-2xl"]):not([class*="rounded-3xl"]) {
  border-radius: 0.625rem;
}