/* Animiertes Logo (Inline-SVG, nachgezeichnet mit tools/logo-vektor.mjs) – Auswahlseite und Startseite B.
   Ablauf ohne Drehung:
   1. Umrisse zeichnen sich (0,1–1,5 s)   2. Flächen füllen sich, Umriss verblasst (1,0–1,9 s)
   3. beide Schriftzüge blenden gleichzeitig ein (1,5–2,2 s): der obere gleitet dabei nach oben, der untere nach unten
   Endzustand (ohne Animation, z. B. bei „Bewegung reduzieren“) = fertiges Logo. Größe legt die Seite fest. */

:root { --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); }

.logo { display: block; height: auto; overflow: visible; }
.logo path { fill-rule: evenodd; }
.logo--gruen { fill: #7bc151; stroke: #7bc151; }
.logo--dunkel { fill: #3f4245; stroke: #3f4245; }
.logo__form {
  stroke-width: 1.75px; vector-effect: non-scaling-stroke; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; stroke-opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .logo__form { animation: logo-umriss 1s var(--ease-in-out) both, logo-fuellen .6s var(--ease-out) both; }
  .logo__form:nth-child(1) { animation-delay: 0.10s, 1.00s; }
  .logo__form:nth-child(2) { animation-delay: 0.15s, 1.05s; }
  .logo__form:nth-child(3) { animation-delay: 0.20s, 1.10s; }
  .logo__form:nth-child(4) { animation-delay: 0.25s, 1.15s; }
  .logo__form:nth-child(5) { animation-delay: 0.30s, 1.20s; }
  .logo__form:nth-child(6) { animation-delay: 0.35s, 1.25s; }
  .logo__form:nth-child(7) { animation-delay: 0.40s, 1.30s; }
  .logo__form:nth-child(8) { animation-delay: 0.45s, 1.35s; }
  .logo__schrift--oben { animation: logo-schrift-hoch 700ms var(--ease-out) 1.5s both; }
  .logo__schrift--unten { animation: logo-schrift-runter 700ms var(--ease-out) 1.5s both; }
}
@media (prefers-reduced-motion: reduce) {
  /* site.css schaltet alle Animationen ab – hier bewusst ein ruhiges Einblenden ohne Bewegung */
  .logo { animation: logo-einblenden 250ms ease both !important; }
}
@keyframes logo-umriss { from { stroke-dashoffset: 1; } }
@keyframes logo-fuellen { from { fill-opacity: 0; stroke-opacity: 1; } to { fill-opacity: 1; stroke-opacity: 0; } }
/* Werte in Logo-Einheiten (Logo 1262 breit): 50 ≈ 4 % der Logohöhe */
@keyframes logo-schrift-hoch { from { opacity: 0; transform: translateY(50px); } }
@keyframes logo-schrift-runter { from { opacity: 0; transform: translateY(-50px); } }
@keyframes logo-einblenden { from { opacity: 0; } }