/* Version 1.5.36 – Eröffnung der Startseite */

/*
 * Die Startseite baut sich beim ersten Besuch des Tages vor den Augen des
 * Besuchers auf: Das Logo wird von links nach rechts aufgedeckt, die vier
 * Wörter erscheinen nacheinander, der Hund läuft von rechts ins Bild.
 *
 * Grundsatz: Sämtliche Inhalte stehen von der ersten Millisekunde an
 * vollständig im Dokument. Es wird nichts verdeckt, nichts nachgeladen und
 * nichts blockiert – es bewegt sich lediglich. Suchmaschinen und
 * Vorlesewerkzeuge sehen die fertige Seite sofort.
 *
 * Der Ablauf startet ausschließlich, wenn am html-Element die Kennung
 * "eroeffnung" gesetzt ist. Ohne JavaScript, ohne verfügbaren Speicher, ab
 * dem zweiten Besuch des Tages und bei aktivierter Systemeinstellung
 * "Bewegung reduzieren" bleibt die Seite unverändert.
 */

@keyframes eroeffnung-logo{
  from{clip-path:inset(0 100% 0 0)}
  to{clip-path:inset(0 0 0 0)}
}
@keyframes eroeffnung-auf{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
@keyframes eroeffnung-klar{
  from{opacity:0}
  to{opacity:1}
}
@keyframes eroeffnung-hund{
  from{transform:translateX(112%)}
  to{transform:translateX(0)}
}

/* Die vier Wörter sind eigene Blöcke, damit sie einzeln bewegt werden können.
   Diese Regel gilt immer, damit sich die Zeilen beim Übergang nicht
   verschieben – auch dann nicht, wenn der Ablauf übersprungen wird. */
.hero-word{display:inline-block}

/* Während der Eröffnung wird der allgemeine Einblendeffekt des Startbereichs
   ausgesetzt. So gilt ausschließlich der zeitliche Ablauf weiter unten. */
.eroeffnung .hero-copy.reveal,
.eroeffnung .hero-visual.reveal{
  opacity:1;
  transform:none;
  transition:none;
}

/* 0,10 s bis 0,80 s: Das Logo wird von links nach rechts aufgedeckt. */
.eroeffnung .brand img{
  animation:eroeffnung-logo .7s cubic-bezier(.65,.02,.35,1) .1s both;
}

/* 0,50 s bis 0,90 s: Die Hauptnavigation folgt. */
.eroeffnung .site-header nav{
  animation:eroeffnung-klar .4s ease-out .5s both;
}

/* 0,40 s bis 2,20 s: Der Hund läuft von rechts herein.
   Bewusst eine Verschiebung und keine Einblendung: Ein verschobenes Bild gilt
   für Googles Ladebewertung als dargestellt, ein unsichtbares dagegen nicht. */
.eroeffnung .hero-visual img{
  animation:eroeffnung-hund 1.8s cubic-bezier(.22,.68,.28,1) .4s both;
}

/* 0,80 s: Die Einleitungszeile über der Überschrift. */
.eroeffnung .hero .eyebrow{
  animation:eroeffnung-auf .35s ease-out .8s both;
}

/* Ab 1,00 s: die vier Wörter im Viertelsekundentakt. */
.eroeffnung .hero-word{
  animation:eroeffnung-auf .4s cubic-bezier(.2,.7,.3,1) both;
}
.eroeffnung .hero-word-1{animation-delay:1s}
.eroeffnung .hero-word-2{animation-delay:1.25s}
.eroeffnung .hero-word-3{animation-delay:1.5s}
.eroeffnung .hero-word-4{animation-delay:1.75s}

/* Ab 1,95 s: Fließtext, Schaltflächen und die Zeile „Seit 2010“. */
.eroeffnung .hero-copy .lead{animation:eroeffnung-auf .35s ease-out 1.95s both}
.eroeffnung .hero-copy .actions{animation:eroeffnung-auf .35s ease-out 2.1s both}
.eroeffnung .hero-copy .trust{animation:eroeffnung-auf .35s ease-out 2.2s both}

/* 2,15 s: Die Zitatkarte erscheint zuletzt und geht anschließend in ihre
   ruhige Schwebebewegung über. Die Drehung um zwei Grad bleibt erhalten,
   weil ausschließlich die Sichtbarkeit angesprochen wird. */
.eroeffnung .hero-visual .quote{
  animation:eroeffnung-klar .4s ease-out 2.15s both,
            quote-float 5.5s ease-in-out 2.55s infinite;
}

/* Der Wunsch nach weniger Bewegung hat immer Vorrang. Diese Regel greift
   zusätzlich zur Abfrage im Seitenkopf, falls die Einstellung erst während
   des Besuchs geändert wird. */
@media(prefers-reduced-motion:reduce){
  .eroeffnung .brand img,
  .eroeffnung .site-header nav,
  .eroeffnung .hero-visual img,
  .eroeffnung .hero .eyebrow,
  .eroeffnung .hero-word,
  .eroeffnung .hero-copy .lead,
  .eroeffnung .hero-copy .actions,
  .eroeffnung .hero-copy .trust,
  .eroeffnung .hero-visual .quote{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    clip-path:none!important;
  }
}

/* Die Kennzahlen zählen beim Einblenden von null hoch. Gleich breite Ziffern
   verhindern, dass die Zahl während des Zählens unruhig zappelt. */
.proof-stats strong{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}