/* MHR Animationssystem. Eine Kurve, eine Sprache: ruhig anfahren, spät abbremsen.
   Signaturen: Serif-Settle, Zähler, Spanne, Wertlinie, Verfeinerung, Chip-Kaskade,
   Karten-Tiefe, Pfeil-Kreis, Zonen-Glühen. Dazu Lesefortschritt und Ablauf-Leiste. */

:root {
  --ease: cubic-bezier(.2, .7, 0, 1);
  --t-s: .35s;
  --t-m: .7s;
  --t-l: 1.1s;
}

/* 1. Serif-Settle: das Akzentwort setzt sich, wenn die Überschrift einläuft */
.js .h1.rv .acc, .js .h2.rv .acc { display: inline-block; opacity: 0; filter: blur(6px); letter-spacing: .05em; transform: translateY(.08em);
  transition: opacity .8s var(--ease) .3s, filter .9s var(--ease) .3s, letter-spacing 1.1s var(--ease) .3s, transform .9s var(--ease) .3s; }
.h1.rv.in .acc, .h2.rv.in .acc { opacity: 1; filter: none; letter-spacing: 0; transform: none; }

/* Reveal mit längerer Kurve */
.rv { transition: opacity var(--t-m) var(--ease), transform var(--t-m) var(--ease); transition-delay: var(--d, 0s); }

/* 2. Zähler: tabellarische Ziffern, damit nichts springt */
[data-count] { font-variant-numeric: tabular-nums; }

/* 3. Spanne: wächst aus der Mitte nach außen */
.rng { position: relative; height: 8px; border-radius: 999px; background: var(--green-tint); overflow: hidden; }
.rng i { position: absolute; top: 0; bottom: 0; left: var(--l, 30%); width: var(--w, 40%); border-radius: 999px; background: var(--green);
  transform: scaleX(0); transform-origin: 50% 50%; transition: transform var(--t-l) var(--ease), left .6s var(--ease), width .6s var(--ease); }
.rng.in i, .in .rng i { transform: scaleX(1); }
.rng--amber i { background: var(--amber); }
.rng--onDark { background: rgba(255,255,255,.16); }
.rng--onDark i { background: var(--amber); }

/* 4. Verfeinerung: die Spanne zieht sich zusammen, die Zahlen setzen nach */
.refine-num { transition: opacity .25s ease; }
.refine-num.tick { opacity: .35; }
.result__bar i { transition: left .8s var(--ease), width .8s var(--ease); }

/* 5. Chip-Kaskade */
.js .casc > * { opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + .15s); }
.js .casc.in > * { opacity: 1; transform: none; }

/* 6. Karten-Tiefe: leichtes Kippen zum Zeiger, Glanz folgt */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); transition: transform .35s var(--ease), box-shadow .35s ease; will-change: transform; position: relative; }
.tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.55), transparent 55%); mix-blend-mode: soft-light; }
.tilt.is-tilting::after { opacity: 1; }
.tilt.is-tilting { --ty: -4px; box-shadow: var(--sh-card); transition-duration: .12s; }

/* 7. Pfeil-Kreis: Pfeil verlässt den Kreis rechts und kommt links zurück */
.pill:hover .ring svg, .cta__tel:hover .ring svg, .pill:focus-visible .ring svg { animation: arrowThrough .55s var(--ease); }
.pill .ring, .cta__tel .ring { overflow: hidden; }
@keyframes arrowThrough { 0% { transform: translateX(0); } 45% { transform: translateX(150%); opacity: 0; } 46% { transform: translateX(-150%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }

/* 8. Zonen-Glühen: Welle läuft von der berührten Zone nach außen */
.kmap__cell rect.glow { fill-opacity: 0; stroke: var(--amber); stroke-width: 0; }
.kmap__cell.is-wave rect.glow { animation: zoneWave 1s var(--ease) both; animation-delay: var(--gd, 0s); }
@keyframes zoneWave { 0% { stroke-width: 0; fill-opacity: 0; } 35% { stroke-width: 3; fill-opacity: .18; } 100% { stroke-width: 0; fill-opacity: 0; } }

/* 9. Wertlinie: Pfad zeichnet sich, Endpunkt pulsiert */
.lchart__path { stroke-linecap: round; stroke-linejoin: round; fill: none; }
.lchart__area { opacity: 0; transition: opacity 1.1s ease .5s; }
.lchart.in .lchart__area { opacity: 1; }
.lchart__end { transform-box: fill-box; transform-origin: center; }
.lchart__halo { transform-box: fill-box; transform-origin: center; animation: haloPulse 2.2s ease-out infinite; }
@keyframes haloPulse { 0% { transform: scale(.6); opacity: .5; } 80%, 100% { transform: scale(2.4); opacity: 0; } }

/* Lesefortschritt (Ratgeber) */
.readbar { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 3px; background: transparent; pointer-events: none; }
.readbar i { display: block; height: 100%; width: 100%; background: var(--green); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* Ablauf-Leiste: Linie füllt sich mit dem Scrollen */
.flow { position: relative; }
/* top = halbe Punkthöhe minus halbe Linienhöhe (54/2 - 2/2), sonst läuft die Linie 1px unter der Punktmitte durch */
.flow__line { position: absolute; left: 0; right: 0; top: 26px; height: 2px; background: var(--line-2); }
.flow__line i { display: block; height: 100%; background: var(--green); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .2s linear; }
.flow__step.is-on .flow__dot { background: var(--green); color: #fff; border-color: var(--green); }

/* Mobile-Menü */
.sheet { position: fixed; inset: 0; z-index: 80; background: rgba(10, 20, 15, .4); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.sheet.open { opacity: 1; pointer-events: auto; }
.sheet__panel { position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(380px, calc(100vw - 20px)); background: var(--frame); border-radius: var(--r-frame); padding: 22px; display: flex; flex-direction: column; gap: 6px; transform: translateX(24px); opacity: 0; transition: transform .45s var(--ease), opacity .3s ease; overflow-y: auto; }
.sheet.open .sheet__panel { transform: none; opacity: 1; }
.sheet__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.sheet__top img { height: 34px; }
.sheet__brand { display: flex; }
.sheet a.sheet__link { display: flex; justify-content: space-between; align-items: center; padding: 16px 6px; border-bottom: 1px solid var(--line); font-size: 21px; font-weight: 500; letter-spacing: -0.01em; }
.sheet a.sheet__link svg { color: var(--muted); }
.sheet__foot { margin-top: auto; padding-top: 18px; display: grid; gap: 10px; }
.sheet__foot .nav__tel { justify-content: center; }
.sheet__foot small { color: var(--muted); font-size: 13px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .js .h1.rv .acc, .js .h2.rv .acc { opacity: 1; filter: none; letter-spacing: 0; transform: none; transition: none; }
  .rng i { transform: none; transition: none; }
  .js .casc > * { opacity: 1; transform: none; transition: none; }
  .tilt, .tilt::after { transition: none; transform: none; }
  .lchart__halo { animation: none; opacity: 0; }
  .kmap__cell.is-wave rect.glow { animation: none; }
  .pill:hover .ring svg, .cta__tel:hover .ring svg { animation: none; }
}



/* ---------- v2: Sprunglink, Menue-Fuss ---------- */
.skip { position: absolute; left: 12px; top: -60px; z-index: 120; background: var(--green-deep); color: #fff; padding: 10px 16px; border-radius: var(--r-btn); font-weight: 500; font-size: 15px; transition: top .15s; }
.skip:focus { top: 12px; }
.sheet__foot { gap: 12px; }
.sheet__foot .pill { justify-content: center; }
.sheet a.sheet__tel { font-size: 26px; font-weight: 500; letter-spacing: -0.01em; text-align: center; white-space: nowrap; padding: 6px 0; }
.sheet__foot small a { text-decoration: underline; text-underline-offset: 3px; }

/* Flache Viewports (iPhone SE und aehnliche): Mit sechs Menuezeilen liegen Telefonnummer und
   "Nachricht schreiben" sonst unter der Panelkante und sind nur per Scrollen erreichbar. */
@media (max-height: 700px) {
  .sheet__top { margin-bottom: 8px; }
  .sheet a.sheet__link { padding: 11px 6px; font-size: 19px; }
  .sheet__foot { padding-top: 12px; gap: 8px; }
  .sheet a.sheet__tel { font-size: 23px; padding: 2px 0; }
}