@charset "UTF-8";

/* Die Logoanimation bleibt vom Layout, Menü und Haupt-CSS getrennt. */
.logo.logo-svg-ready {
  background-image: none;
}

.logo .onz-logo-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.logo-animation-active .logo-square {
  fill: #004d99;
  opacity: 0;
}

.logo-animation-active .logo-square-4 {
  fill: #129ed2;
}

.logo-animation-active .logo-letter,
.logo-animation-active .logo-ampersand,
.logo-animation-active .logo-word {
  opacity: 0;
}

/* 1. Die senkrechte Grundlinie wächst unmittelbar aus einem Punkt. */
.logo-animation-active .logo-build-line {
  fill: #004d99;
  transform-box: fill-box;
  transform-origin: center;
  animation: onzVerticalLine 1200ms cubic-bezier(.22, .61, .36, 1) both;
}

/* 2. Die Linie verbreitert sich ruhig nach links und rechts. */
.logo-animation-active .logo-build-field {
  fill: #004d99;
  transform-box: fill-box;
  transform-origin: center;
  animation: onzBlueField 1450ms cubic-bezier(.22, .61, .36, 1) 1000ms both;
}

/* 3. Die Teilung entsteht bereits während sich das Rechteck verbreitert. */
.logo-animation-active .logo-divider {
  fill: #fff;
  transform-box: fill-box;
  transform-origin: top center;
  animation: onzDivider 720ms cubic-bezier(.22, .61, .36, 1) both;
}

.logo-animation-active .logo-divider-2 { animation-delay: 1180ms; }
.logo-animation-active .logo-divider-1,
.logo-animation-active .logo-divider-3 { animation-delay: 1650ms; }

/* 4. Beim Entstehen der äußeren Teilungen geht das letzte Feld ins Hellblau. */
.logo-animation-active .logo-build-highlight {
  fill: #129ed2;
  opacity: 0;
  animation: onzHighlight 800ms ease-in-out 1650ms both;
}

/* 5. Zuerst wird ONZ langsam scharf; & und Wortmarke folgen gemeinsam. */
.logo-animation-active .logo-letter {
  will-change: opacity, filter;
  animation: onzGlyphReveal 1200ms cubic-bezier(.22, .61, .36, 1) 2800ms both;
}

.logo-animation-active .logo-ampersand {
  will-change: opacity, filter;
  animation: onzGlyphReveal 820ms cubic-bezier(.22, .61, .36, 1) 4000ms both;
}

.logo-animation-active .logo-word-partner,
.logo-animation-active .logo-word-lawyers {
  animation: onzWordReveal 820ms cubic-bezier(.22, .61, .36, 1) 4000ms both;
}

@keyframes onzVerticalLine {
  0%   { opacity: 0; transform: scaleY(.045); }
  16%  { opacity: 1; transform: scaleY(.06); }
  82%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

@keyframes onzBlueField {
  0%   { opacity: 0; transform: scaleX(.01562); }
  8%   { opacity: 1; transform: scaleX(.01562); }
  100% { opacity: 1; transform: scaleX(1); }
}

@keyframes onzDivider {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}

@keyframes onzHighlight {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes onzGlyphReveal {
  from {
    opacity: 0;
    filter: blur(5px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes onzWordReveal {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-animation-active .logo-build-line,
  .logo-animation-active .logo-build-field,
  .logo-animation-active .logo-build-highlight,
  .logo-animation-active .logo-divider {
    display: none;
  }

  .logo-animation-active .logo-square,
  .logo-animation-active .logo-letter,
  .logo-animation-active .logo-ampersand,
  .logo-animation-active .logo-word {
    opacity: 1;
    animation: none;
    transform: none;
  }
}