/* Amorazza – Vision-Label auf index2.php (V100) ------------------------
   Pille zwischen Hero und Countdown. Verlinkt auf /vision.php.

   Korrekturen gegenueber V099:
   - Text getauscht: Lead "600.000 Herzen wollen wir erreichen" links,
     CTA "Mehr Info, frage Deine Heimatstadt ab" rechts.
   - text-decoration: none defensiv fuer ALLE Link-States, damit der
     globale a:hover-Unterstrich nicht durchschlaegt.
   - Hero-Tagline-Abstand reduziert (.hero-tagline margin-bottom 48 -> 24)
     und Label bekommt explizite symmetrische Margins, damit der
     vertikale Abstand oberhalb und unterhalb des Labels gleich ist.
   - Pille verbreitert (max-width 540 -> 680) wegen laengerem CTA.
------------------------------------------------------------------------ */

/* === V122: ABSTAND ROBUST VIA PADDING (kein Margin-Collapse mehr) ===
   Drei vorhergehende Versuche mit margin-Werten an .hero / .hero-tagline /
   .vision-label haben das Problem nicht geloest: Margins collabieren
   zwischen Geschwistern, brechen durch Eltern hindurch, und kombinieren
   mit Browser-Default-Margins der <p>-Tags. Das Ergebnis war jedes Mal
   visuell schief.

   Die saubere Loesung: padding statt margin. Padding collabiert NIE.
   Symmetrische 56px Padding-bottom auf .hero und Padding-top auf
   .countdown-section -- die Pille selbst hat 0 margin. */
body.page-launch .hero {
  margin-bottom: 0 !important;
  padding-bottom: 56px;
}
body.page-launch .hero-tagline {
  margin-bottom: 0 !important;
}
body.page-launch .countdown-section {
  margin-top: 0 !important;
  padding-top: 56px;
}

/* === Link-State: KEIN Unterstrich, in keiner Phase ===
   Wichtig: Der globale a:hover in style.css setzt text-decoration:
   underline. Hier defensiv fuer alle Link-States ueberschrieben. */
.vision-label,
.vision-label:link,
.vision-label:visited,
.vision-label:hover,
.vision-label:active,
.vision-label:focus {
  text-decoration: none;
}

.vision-label {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 820px;
  /* V122: KEINE margins mehr - Abstand kommt aus Padding der Nachbarn. */
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 22px 32px;
  background: #fbeaf0;
  border: 1px solid #f4c0d1;
  border-radius: 999px;
  color: #2c2c2a;
  flex-wrap: wrap;
  justify-content: center;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.vision-label:hover,
.vision-label:focus {
  background: #f7d6e0;
  border-color: #d4537e;
  transform: translateY(-1px);
  outline: none;
}

.vision-label-heart {
  color: #d4537e;
  font-size: 38px;                 /* V121: war 24px */
  line-height: 1;
  flex-shrink: 0;
  display: inline-block;
  animation: vision-label-pulse 1.6s ease-in-out infinite;
}

.vision-label-text {
  font-size: 28px;                 /* V121: war 15px - knapp doppelt */
  line-height: 1.35;
  color: #2c2c2a;
  font-weight: 500;
}

.vision-label-number {
  color: #d4537e;
  font-weight: 600;
}

.vision-label-cta {
  font-size: 20px;                 /* V121: war 14px */
  color: #d4537e;
  margin-left: auto;
  white-space: nowrap;
}

@keyframes vision-label-pulse {
  0%, 50%, 100% { transform: scale(1); }
  10%           { transform: scale(1.22); }
  25%           { transform: scale(1); }
  35%           { transform: scale(1.15); }
}

/* Mittlere/schmale Displays: wenn der CTA nicht in eine Zeile passt,
   bricht er um, beide Texte mittig.
   V121: Schwelle hoeher gesetzt, weil der laengere Lead-Text mit 28px
   eher umbricht. */
@media (max-width: 820px) {
  .vision-label {
    gap: 14px;
    padding: 20px 24px;
    border-radius: 20px;
  }
  .vision-label-cta {
    margin-left: 0;
    white-space: normal;
    text-align: center;
    width: 100%;
  }
  .vision-label-text {
    text-align: center;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .vision-label { padding: 16px 18px; }
  .vision-label-text { font-size: 22px; }
  .vision-label-cta  { font-size: 16px; }
  .vision-label-heart { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .vision-label-heart { animation: none; }
}