/* ==========================================================================
   KGR-Wahl 2025 – Seitenspezifische Styles
   Gilt nur, weil die Datei per Footer-Condition NUR auf dieser Seite geladen wird.
   ========================================================================== */

main h4 {
  font-style: normal !important;
  font-size: 1.2em;
  font-weight: 200;
  line-height: 1.4em;
  margin-bottom: 60px;
}

/* Section mit dem Hintergrund */
.bg-kirchenwahl {
  position: relative;
  overflow: hidden;
  /* zentrale Breite des Badges */
  --kw-badge-w: clamp(130px, 24vw, 300px);
  /* kleine Default-Verzögerung für sanfteren Start */
  --kw-badge-delay: .15s;
}

/* Badge selbst */
.kw-badge {
  position: absolute;
  right: clamp(8px, 2vw, 24px);
  bottom: 0;
  width: var(--kw-badge-w);
  z-index: 2;
  pointer-events: none;

  /* Startzustand (sanft) */
  opacity: 0;
  transform: translateY(20px) scale(.985);
  filter: blur(6px);

  transition:
    opacity 1.2s cubic-bezier(.22,.61,.36,1) var(--kw-badge-delay),
    transform 1.2s cubic-bezier(.22,.61,.36,1) var(--kw-badge-delay),
    filter 1.2s cubic-bezier(.22,.61,.36,1) var(--kw-badge-delay);
  will-change: opacity, transform, filter;
}

/* Erst sichtbar, wenn IO + Bild geladen */
.kw-badge.is-visible {
  opacity: 1;
  transform: none; /* = translateY(0) scale(1) */
  filter: none;
}

/* Bild selbst zusätzlich leicht überblenden, damit kein hartes „Aufploppen“,
   wenn das Bild etwas später als der Container verfügbar ist */
.kw-badge img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  transition: opacity .8s ease .3s; /* kurze Verzögerung -> noch softer */
}

/* Wird gesetzt, sobald das Bild geladen ist (per JS) */
.kw-badge.is-loaded img {
  opacity: 1;
}

/* --- Textfreiraum NUR wenn die Spalten stapeln (mobil/tablet) --- */
@media (max-width: 992px) {
  .bg-kirchenwahl { --kw-badge-w: clamp(140px, 30vw, 220px); }
  .bg-kirchenwahl > .container {
    /* Freiraum unter dem Text = Badge-Höhe (~0.9 * Breite) + Luft */
    padding-bottom: calc(var(--kw-badge-w) * 0.9 + 16px);
  }
}
@media (max-width: 600px) {
  .bg-kirchenwahl { --kw-badge-w: clamp(110px, 38vw, 180px); }
  .bg-kirchenwahl > .container {
    padding-bottom: calc(var(--kw-badge-w) * 0.9 + 20px);
  }
}

/* -- 1) em-Formatierung in <main> ---------------------------------------- */
main em {
  font-style: italic;
  font-size: 0.8em;
  color: rgba(166, 19, 128, 1); /* Lila */
  /* Alternative:
  color: rgba(199, 211, 0, 1);  /* Grün */
  */
}

/* Das allererste <em> im ersten .layout-Block neutralisieren */
main .layout:first-of-type .blocks p:first-of-type em:first-of-type {
  font-style: revert;
  font-size: revert;
  color: revert;
}

/* -- 2) Absatzlinie innerhalb .blocks ------------------------------------ */
/* Linie nur zwischen aufeinanderfolgenden Absätzen (wirkt nicht nach Überschriften/Bildern) */
.layout .blocks > p + p {
  border-top: 1px solid #ccc;
  padding-top: .75rem;
  margin-top: 1rem;
}

/* --- Scroll-Reveal: langsame, angenehme Bewegung --- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  --dur: 1s;
  transition: opacity var(--dur) cubic-bezier(.22,.61,.36,1),
              transform var(--dur) cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Bild: immer von links, langsam */
.reveal.img.from-left {
  transform: translateX(-120px); /* Start 120px LINKS vom Ziel */
  --dur: 1.8s;                   /* gemütliche Dauer */
}

/* Wenn sichtbar: wieder an Zielposition */
.reveal.img.from-left.is-visible {
  transform: none;
}

/* Stagger für Text-Inhalt (Überschrift + Absätze „rollen“ rein) */
.blocks.stagger > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .65s ease-out, transform .65s ease-out;
}
.blocks.stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

/* Verzögerungen erhöhen die Leselust :) */
.blocks.stagger > *:nth-child(1) { transition-delay: .35s; }
.blocks.stagger > *:nth-child(2) { transition-delay: .50s; }
.blocks.stagger > *:nth-child(3) { transition-delay: .65s; }
.blocks.stagger > *:nth-child(4) { transition-delay: .80s; }
.blocks.stagger > *:nth-child(5) { transition-delay: .95s; }
.blocks.stagger > *:nth-child(6) { transition-delay: 1.10s; }

/* Respekt vor Nutzerpräferenzen */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .blocks.stagger > * {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .kw-badge {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .kw-badge img {
    transition: none !important;
    opacity: 1 !important;
  }
}

/* --- Kandidaten-Index minimal (keine Linien, keine Headline) --- */
.candidate-index { 
  margin-top: .5rem; /* optional, kann auch 0 sein */
}

.candidate-index__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.candidate-index__item {
  display: inline-block;
  padding: .45rem .7rem;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fafafa;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.15;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.candidate-index__item:hover,
.candidate-index__item:focus {
  background: #fff;
  border-color: #ccc;
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .candidate-index__item { transition: none; }
}

/* --- Nach-oben-Button (grün, SVG, animierter Pfeil) --- */
#scrollTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  background: rgba(199, 211, 0, 0.95); /* dein Grün */
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  transition: opacity .35s ease, transform .35s ease, background .25s ease;
}

#scrollTopBtn.show {
  opacity: 1;
  pointer-events: auto;
}

#scrollTopBtn:hover {
  background: rgba(199, 211, 0, 1);
  transform: translateY(-3px);
}

/* SVG-Pfeil animiert leicht auf/ab */
#scrollTopBtn svg {
  width: 22px;
  height: 22px;
  animation: upDown 1.4s ease-in-out infinite;
}

@keyframes upDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  #scrollTopBtn svg { animation: none; }
}

/* --- KGR-Rechte: Zeilenweise Einblendung --- */
.kgr-rechte > *,
.kgr-rechte ul > li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}
.kgr-rechte.is-visible > *,
.kgr-rechte.is-visible ul > li {
  opacity: 1;
  transform: none;
}
.kgr-rechte p:first-of-type { transition-delay: 0s; }
.kgr-rechte ul > li:nth-child(1) { transition-delay: .1s; }
.kgr-rechte ul > li:nth-child(2) { transition-delay: .25s; }
.kgr-rechte ul > li:nth-child(3) { transition-delay: .4s; }
.kgr-rechte ul > li:nth-child(4) { transition-delay: .55s; }
.kgr-rechte ul > li:nth-child(5) { transition-delay: .7s; }
.kgr-rechte ul > li:nth-child(6) { transition-delay: .85s; }
.kgr-rechte ul > li:nth-child(7) { transition-delay: 1s; }

@media (prefers-reduced-motion: reduce) {
  .kgr-rechte > *,
  .kgr-rechte ul > li {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}



/* ==========================================================================
   Ende
   ========================================================================== */