/* Logo-Animation (Muster, 30.09.2026). Nur auf den Musterseiten eingebunden,
   style.css bleibt unberuehrt. Video ohne Rahmen, Schatten und Rundung, damit
   keine Kante zur Seitenflaeche #F6F4EE sichtbar wird.
   Zuschnitt: Die Animation nutzt ueber alle Frames nur den Bereich
   x 276 bis 1552, y 272 bis 860 (von 1920 x 1080). Das Fenster zeigt
   x 180 bis 1740 und y 150 bis 930, also 2:1, mittig auf dem Schlussbild. */
.logo-anim { margin: var(--sp-5) 0 0; max-width: 880px; }
/* Linksbuendig zum Text (13.10.2026): Die ersten Begriffe beginnen bei x 298,
   also 118 von 1560 Einheiten (7,564 %) rechts vom Fensterrand. Das Fenster
   ruckt um diesen Anteil nach links, damit "Resilienz" buendig unter der
   Ueberschrift startet. Der verschobene Rand ist Seitenflaeche und unsichtbar. */
.logo-anim__frame {
  position: relative;
  transform: translateX(-7.564%);
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--offwhite);
  /* Weicher Rand: Das 8-Bit-Video landet je nach Browser bei #F6F4EE oder
     #F6F5EE. Die Ausblendung ueber 35 px verhindert jede Kante, ohne den
     Inhalt zu beruehren (Abstand Inhalt zum Fensterrand mindestens 39 px). */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-composite: intersect;
}
.logo-anim__video {
  display: block;
  width: 123.077%;          /* 1920 / 1560 */
  max-width: none;
  height: auto;
  margin-left: -11.538%;    /* 180 / 1560 */
  margin-top: -9.615%;      /* 150 / 1560, Prozent beziehen sich auf die Breite */
  border: 0;
  outline: 0;
}
.logo-anim__controls {
  display: flex;
  justify-content: flex-start;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
}
.logo-anim__controls[hidden] { display: none; }
.logo-anim__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-md);
  line-height: 1;
  padding: 9px 14px;
  color: var(--blau);
  background: transparent;
  border: 1.5px solid var(--blau);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.logo-anim__btn:hover { background: var(--blau); color: #fff; }
.logo-anim__btn svg { width: 14px; height: 14px; flex: none; }
.logo-anim__btn [data-icon] { display: none; }
.logo-anim__btn[data-state="playing"] [data-icon="pause"],
.logo-anim__btn[data-state="paused"]  [data-icon="play"],
.logo-anim__btn[data-state="ended"]   [data-icon="replay"],
.logo-anim__btn[data-state="muted"]   [data-icon="sound-off"],
.logo-anim__btn[data-state="unmuted"] [data-icon="sound-on"] { display: block; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Nur fuer die Musterseiten: Hinweisleiste zum Vergleich der Varianten */
.muster-bar {
  background: var(--anthrazit);
  color: rgba(246, 244, 238, 0.92);
  font-size: var(--fs-sm);
}
.muster-bar .wrap {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  justify-content: space-between; padding-top: 8px; padding-bottom: 8px;
}
.muster-bar a { color: #fff; }
.muster-bar a[aria-current] { font-weight: 500; text-decoration: none; }