/* ==========================================
   Gemeindepflege-Animation (Cassiopeia)
   ========================================== */

.gp-animation-wrapper.gp-petition {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 420px;
  margin: 0 auto 2rem;
  background: #ffffff;
  overflow: hidden;
}

/* Hintergrund */
.gp-animation-wrapper.gp-petition .gp-animation-bg {
  position: absolute;
  inset: 0;
  background: #ffffff;
  z-index: 0;
}

/* Grundstil aller Texte */
.gp-animation-wrapper.gp-petition .gp-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               -webkit-system-font, sans-serif;
  font-weight: 600;
  font-size: 3rem;
  color: #004c91;
  text-align: center;
  padding: 0.2em 0.8em;
  line-height: 1.2;
  white-space: normal;
  pointer-events: none;
  /* Texte überdecken sich, kein Durchscheinen */
  background: #fff000;
  z-index: 1;
}

/* ==========================================
   Animationsdefinitionen – Dauer 3 s,
   Delay-Schritte 2 s
   ========================================== */

/* 1 */
.gp-animation-wrapper.gp-petition .gp1 {
  animation: gp1move 3s ease forwards;
}
@keyframes gp1move {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); z-index: 2; }
  100% { opacity: 1; left: 6%; top: 12%; transform: translate(0, 0) scale(0.6); font-size: 1.1rem; z-index: 1; }
}

/* 2 */
.gp-animation-wrapper.gp-petition .gp2 {
  animation: gp2move 3s ease forwards;
  animation-delay: 2s;
}
@keyframes gp2move {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); z-index: 2; }
  100% { opacity: 1; left: 58%; top: 18%; transform: translate(0, 0) scale(0.6); font-size: 1.1rem; z-index: 1; }
}

/* 3 */
.gp-animation-wrapper.gp-petition .gp3 {
  animation: gp3move 3s ease forwards;
  animation-delay: 4s;
}
@keyframes gp3move {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); z-index: 2; }
  100% { opacity: 1; left: 64%; top: 70%; transform: translate(0, 0) scale(0.6); font-size: 1.1rem; z-index: 1; }
}

/* 4 */
.gp-animation-wrapper.gp-petition .gp4 {
  animation: gp4move 3s ease forwards;
  animation-delay: 6s;
}
@keyframes gp4move {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); z-index: 2; }
  100% { opacity: 1; left: 10%; top: 72%; transform: translate(0, 0) scale(0.6); font-size: 1.1rem; z-index: 1; }
}

/* 5 */
.gp-animation-wrapper.gp-petition .gp5 {
  animation: gp5move 3s ease forwards;
  animation-delay: 8s;
}
@keyframes gp5move {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); z-index: 2; }
  100% { opacity: 1; left: 8%; top: 40%; transform: translate(0, 0) scale(0.6); font-size: 1.1rem; z-index: 1; }
}

/* 6 */
.gp-animation-wrapper.gp-petition .gp6 {
  animation: gp6move 3s ease forwards;
  animation-delay: 10s;
}
@keyframes gp6move {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); z-index: 2; }
  100% { opacity: 1; left: 55%; top: 42%; transform: translate(0, 0) scale(0.6); font-size: 1.1rem; z-index: 1; }
}

/* 7 */
.gp-animation-wrapper.gp-petition .gp7 {
  animation: gp7move 3s ease forwards;
  animation-delay: 12s;
}
@keyframes gp7move {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); z-index: 2; }
  100% { opacity: 1; left: 70%; top: 8%; transform: translate(0, 0) scale(0.6); font-size: 1.1rem; z-index: 1; }
}

/* 8 */
.gp-animation-wrapper.gp-petition .gp8 {
  animation: gp8move 3s ease forwards;
  animation-delay: 14s;
}
@keyframes gp8move {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); z-index: 2; }
  100% { opacity: 1; left: 32%; top: 10%; transform: translate(0, 0) scale(0.6); font-size: 1.1rem; z-index: 1; }
}

/* 9 */
.gp-animation-wrapper.gp-petition .gp9 {
  animation: gp9move 3s ease forwards;
  animation-delay: 16s;
}
@keyframes gp9move {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); z-index: 2; }
  100% { opacity: 1; left: 32%; top: 78%; transform: translate(0, 0) scale(0.6); font-size: 1.1rem; z-index: 1; }
}

/* 10 – Petition-Link */
.gp-animation-wrapper.gp-petition .gp10 {
  animation: gp10move 3s ease forwards;
  animation-delay: 18s;
  text-decoration: none;
  color: #004c91;
  border: 2px solid #004c91;
  border-radius: 0.5em;
  padding: 0.4em 0.8em;
  background: #ffffff;
  pointer-events: auto;
  transition: background 0.3s, color 0.3s, transform 0.3s;
  z-index: 3;
}
@keyframes gp10move {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  40%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); font-size: 2rem; }
}
.gp-animation-wrapper.gp-petition .gp10:hover {
  background: #004c91;
  color: #ffffff;
  transform: translate(-50%, -50%) scale(1.22);
  cursor: pointer;
}

/* ==========================================
   Mobile – kleinere Schrift & Höhe
   ========================================== */
@media (max-width: 768px) {
  .gp-animation-wrapper.gp-petition {
    height: 340px;
  }
  .gp-animation-wrapper.gp-petition .gp-text {
    font-size: 1.2rem;
  }
  .gp-animation-wrapper.gp-petition .gp1,
  .gp-animation-wrapper.gp-petition .gp2,
  .gp-animation-wrapper.gp-petition .gp3,
  .gp-animation-wrapper.gp-petition .gp4,
  .gp-animation-wrapper.gp-petition .gp5,
  .gp-animation-wrapper.gp-petition .gp6,
  .gp-animation-wrapper.gp-petition .gp7,
  .gp-animation-wrapper.gp-petition .gp8,
  .gp-animation-wrapper.gp-petition .gp9 {
    font-size: 0.9rem;
  }
}