/* =====================================================================
   JUNGES OSTALLGÄU — REFERENZEN
   Erfolgsbilanz der Kreistagsfraktion 2020–2026.
   Baut auf site.css auf. Animationen via Motion (lokal, js/vendor).
   DSGVO-safe: keine externen Requests. Ohne JS ist alles sichtbar.
   ===================================================================== */

/* ---------- HERO ---------- */
.rhero{
  position:relative;overflow:hidden;
  min-height:calc(100svh - var(--nav-h));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(3.5rem,9vh,6rem) var(--pad) clamp(2.5rem,6vh,4rem);
  background:
    radial-gradient(120% 75% at 50% -10%, #16306a 0%, transparent 58%),
    #0E2148;
  color:#fff;
}
.rhero__glow{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.rhero__glow--a{width:640px;height:640px;background:radial-gradient(circle,rgba(46,99,216,.2),transparent 70%);filter:blur(70px);top:-240px;left:-160px}
.rhero__glow--b{width:520px;height:520px;background:radial-gradient(circle,rgba(125,160,236,.11),transparent 70%);filter:blur(80px);bottom:-220px;right:-140px}
.rhero__inner{position:relative;z-index:20;width:100%;max-width:980px;display:flex;flex-direction:column;align-items:center}

.rhero__eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:#8fb0f0;will-change:transform,opacity}

.rhero__title{
  font-weight:800;line-height:1.02;letter-spacing:-.03em;text-transform:uppercase;
  font-size:clamp(2.1rem,7vw,6.2rem);color:#fff;margin:1.2rem 0 0;
}
.rhero__title-line{display:block;will-change:transform,opacity}
.rhero__title-line--accent{color:#8fb0f0}

/* Untertitel — jeder Satz eine eigene, zentrierte Zeile */
.rhero__sub{
  display:flex;flex-direction:column;align-items:center;gap:.35em;
  max-width:min(52rem,90vw);margin:clamp(1.3rem,2.8vw,1.9rem) auto 0;
}
.rhero__sub-line{
  display:block;will-change:transform,opacity;
  font-size:clamp(.92rem,1.9vw,1.15rem);line-height:1.65;font-weight:300;
  letter-spacing:.025em;color:rgba(255,255,255,.62);
}
.rhero__sub-line--1{color:rgba(255,255,255,.9);font-weight:400}

/* feine Lichtlinie (statt Box) */
.rhero__divider{position:relative;width:min(36rem,82vw);height:6px;margin-top:clamp(2.2rem,5.5vh,3.2rem);will-change:transform,opacity}
.rhero__divider span{position:absolute;left:0;right:0;margin-inline:auto;pointer-events:none;display:block}
.rhero__divider-line--1{top:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,#7ea1ec,transparent);filter:blur(1px)}
.rhero__divider-line--2{top:0;width:42%;height:1px;background:linear-gradient(90deg,transparent,#aecbf5,transparent)}

/* Kennzahlen — reduziert, editorial, nur Hairlines (Count-up) */
.rhero__stats{display:flex;justify-content:center;align-items:stretch;margin-top:clamp(1.9rem,4.5vh,2.8rem);width:min(56rem,100%)}
.rstat{flex:1;padding:.5rem clamp(.9rem,2.6vw,2rem);text-align:center;border-right:1px solid rgba(255,255,255,.13);will-change:transform,opacity}
.rstat:last-child{border-right:none}
.rstat b{display:block;font-size:clamp(1.45rem,2.9vw,2.3rem);font-weight:800;letter-spacing:-.02em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.rstat b .rstat__suffix{font-size:.5em;font-weight:700;letter-spacing:0;color:#8fb0f0;vertical-align:baseline}
.rstat span{display:block;margin-top:.55rem;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600}
@media(max-width:720px){
  .rhero__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem 0}
  .rstat:nth-child(2){border-right:none}
}

/* Scroll-Hinweis — im Fluss unter den Stats, immer zentriert, verdeckt nichts */
.rhero__scroll{margin-top:clamp(2.6rem,7vh,4.2rem);display:flex;flex-direction:column;align-items:center;will-change:transform,opacity}
.rhero__scroll span{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.35);font-weight:400;margin-bottom:.85rem}
.rhero__scroll-line{width:1px;height:3.2rem;background:linear-gradient(180deg,transparent,#7ea1ec 40%,transparent);animation:rScroll 2.2s cubic-bezier(.16,1,.3,1) 1.4s infinite}
@keyframes rScroll{0%{transform:scaleY(0) translateY(-100%);opacity:0}30%{opacity:1}70%{opacity:1}100%{transform:scaleY(1) translateY(0);opacity:0}}
@media(max-height:680px){.rhero__scroll{display:none}}

/* Entrance — progressive enhancement: ohne JS ist alles sichtbar,
   JS (Motion) setzt die Startzustände selbst per Inline-Style. */

/* ---------- FRAKTION ---------- */
.frak{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:2.6rem}
@media(max-width:760px){.frak{grid-template-columns:1fr}}
.fcard{
  display:grid;grid-template-columns:132px 1fr;gap:1.4rem;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.5rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.fcard__photo{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.fcard__photo img{width:100%;aspect-ratio:768/960;object-fit:cover;transition:transform .5s var(--ease)}
.fcard:hover .fcard__photo img{transform:scale(1.04)}
.fcard__eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-600)}
.fcard h3{font-size:1.35rem;margin:.3rem 0 .2rem;letter-spacing:-.01em}
.fcard__role{color:var(--muted);font-size:.92rem}
.fcard__link{display:inline-flex;align-items:center;gap:.4rem;margin-top:.85rem;font-size:.88rem;font-weight:600;color:var(--blue-600)}
.fcard__link svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.fcard__link:hover svg{transform:translateX(3px)}
@media(max-width:440px){.fcard{grid-template-columns:1fr;text-align:left}.fcard__photo{max-width:180px}}

/* ---------- TIMELINE ---------- */
.tl{position:relative;margin-top:clamp(3rem,6vw,4.5rem)}
.tl__track{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--line-2);border-radius:2px}
.tl__progress{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;transform:scaleY(0);transform-origin:top center;background:linear-gradient(180deg,var(--blue-500),var(--blue-600));border-radius:2px;will-change:transform}

.tl__item{position:relative;display:flex;width:100%;padding-bottom:clamp(2.2rem,5vw,3.5rem)}
.tl__item:last-child{padding-bottom:0}
.tl__marker{
  position:absolute;left:50%;top:2.1rem;margin-left:-9px;z-index:2;
  width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--blue-600);
  display:flex;align-items:center;justify-content:center;will-change:transform;
}
.tl__marker::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-600)}

.tl__card{
  width:calc(50% - clamp(2rem,4vw,3.2rem));
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.6rem,3vw,2.2rem);box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
  will-change:transform,opacity;
}
.tl__card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.tl__item:nth-child(even) .tl__card{margin-left:auto}

.tl__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.tl__no{
  font-size:clamp(2.4rem,4vw,3.4rem);font-weight:800;line-height:.9;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px var(--blue-300);
  font-variant-numeric:tabular-nums;will-change:transform,opacity;
}
@supports not (-webkit-text-stroke:1px black){.tl__no{color:var(--blue-100)}}
.tl__icon{flex:none;width:52px;height:52px;border-radius:14px;background:var(--blue-50);color:var(--blue-600);display:flex;align-items:center;justify-content:center}
.tl__icon svg{width:26px;height:26px}

.tl__badges{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.9rem}
.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.38rem .75rem;border-radius:var(--r-full);line-height:1.1}
.badge svg{width:13px;height:13px;flex:none}
.badge--topic{background:var(--blue-50);color:var(--navy);border:1px solid var(--blue-100)}
.badge--done{background:var(--blue-600);color:#fff;box-shadow:0 4px 14px rgba(29,73,194,.25)}
.badge--push{background:#fff;color:var(--blue-700);border:1px solid var(--blue-300)}

.tl__card h3{font-size:clamp(1.25rem,1.9vw,1.55rem);letter-spacing:-.015em;margin-bottom:.65rem}
.tl__card p{color:var(--muted);font-size:.97rem;line-height:1.7}
.tl__card p+p{margin-top:.7rem}
.tl__card p strong{color:var(--text)}

@media(max-width:920px){
  .tl__track,.tl__progress{left:9px;margin-left:0}
  .tl__marker{left:9px;margin-left:-8px}
  .tl__card,.tl__item:nth-child(even) .tl__card{width:auto;margin-left:2.4rem}
}
@media(max-width:480px){
  .tl__card,.tl__item:nth-child(even) .tl__card{margin-left:2rem;padding:1.35rem 1.2rem}
  .tl__icon{width:44px;height:44px;border-radius:12px}
  .tl__icon svg{width:22px;height:22px}
}

/* ---------- CTA (ein Band, Statement integriert) ---------- */
.rcta__statement{font-size:clamp(1.5rem,3.2vw,2.45rem);font-weight:800;line-height:1.22;letter-spacing:-.02em;margin:1rem 0 1.2rem;text-wrap:balance;color:#fff}
.rcta__statement em{font-style:normal;color:#8fb0f0}