/* Einstieg rehaundcare.de: vier Schritte vom Rezept bis nach Hause.
   Text und Bilder stehen im HTML. Die Uhr ist die Linie im aktiven Schritt
   (animationend schaltet weiter); Pause-Knopf, Maus und Tastaturfokus halten
   sie an, bei reduzierter Bewegung laeuft sie gar nicht. */
.hero-top{padding-top:118px}
.hero p.hero-lead{max-width:640px}
.weg{--dauer:8s;max-width:1000px;margin:36px auto 0;text-align:left;position:relative;
  background:#fff;border:1px solid var(--color-border);border-radius:24px 24px 0 0;border-bottom:0;
  box-shadow:0 -6px 40px rgba(1,79,161,.10)}
.wegKopf{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:4px;align-items:stretch;padding:10px 12px 0}
.wegKopf button{font:inherit;cursor:pointer;background:none;border:0;color:#3d4f63}
.wegKopf .schritt{position:relative;display:flex;align-items:center;gap:10px;padding:12px 12px 16px;min-height:48px;
  font-size:16px;font-weight:600;text-align:left;border-radius:12px;transition:background .2s,color .2s}
.wegKopf .schritt b{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:14px;font-weight:700;background:var(--color-light);color:var(--color-primary);transition:background .25s,color .25s}
.wegKopf .schritt:hover{background:var(--color-light-2)}
.wegKopf .schritt.on{color:var(--color-primary-dark)}
.wegKopf .schritt.on b,.wegKopf .schritt.war b{background:var(--color-primary);color:#fff}
.wegKopf .schritt i{position:absolute;left:12px;right:12px;bottom:4px;height:3px;border-radius:3px;background:var(--color-light);overflow:hidden}
.wegKopf .schritt i::after{content:"";position:absolute;inset:0;background:var(--color-primary);transform:scaleX(0);transform-origin:left}
.wegKopf .schritt.war i::after{transform:none}
.wegKopf .schritt.on i::after{transform:none;animation:wegLauf var(--dauer) linear both}
.weg:hover .schritt.on i::after,.weg:has(:focus-visible) .schritt.on i::after,.weg.halt .schritt.on i::after{animation-play-state:paused}
@keyframes wegLauf{from{transform:scaleX(0)}}
.wegKopf .pause{align-self:center;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--color-primary)}
.wegKopf .pause:hover{background:var(--color-light-2)}
.wegKopf .pause svg{width:18px;height:18px;fill:currentColor}
.wegKopf .pause .spiel,.weg.halt .pause .halten{display:none}
.weg.halt .pause .spiel{display:block}
.weg button:focus-visible,.weg a:focus-visible{outline:3px solid var(--color-accent-warm);outline-offset:2px}

.wegBuehne{display:grid;padding:8px 40px 0}
.wegSzene{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:28px;align-items:center;
  visibility:hidden;opacity:0;transition:opacity .35s,visibility 0s .35s}
.wegSzene.on{visibility:visible;opacity:1;transition:opacity .5s .1s}
.wegText{padding:18px 0 34px}
.wegText .vor{display:block;font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--color-primary);margin-bottom:8px}
.wegText h2{margin:0;font-size:clamp(23px,2.4vw,30px);font-weight:800;line-height:1.18;letter-spacing:-.3px;color:var(--color-primary-dark);text-wrap:balance}
.wegText p{margin:12px 0 0;font-size:17.5px;line-height:1.55;color:#1c2733;max-width:42ch}
.wegText .btn{margin-top:20px;font-size:16px;padding:13px 22px}
.wegSzene.on .wegText>*{animation:wegAuf .6s cubic-bezier(.23,1,.32,1) both}
.wegSzene.on .wegText>:nth-child(2){animation-delay:.07s}
.wegSzene.on .wegText>:nth-child(3){animation-delay:.14s}
.wegSzene.on .wegText>:nth-child(4){animation-delay:.21s}

.wegBild{position:relative;height:270px;align-self:end}
.wegBild img{position:absolute;bottom:0;left:0;height:100%;width:250px;max-width:none;object-fit:contain;object-position:left bottom}
.wegBild img.eng{object-fit:cover;object-position:left bottom}
/* Die Zettel stehen NEBEN der Figur, nie auf ihr: sonst liegen sie ueber Gesichtern */
.zettelSpalte{position:absolute;left:246px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.wegSzene.on .wegBild img.fig{animation:wegFigur .7s cubic-bezier(.23,1,.32,1) both}
.wegBild .zettel{display:flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;white-space:nowrap;
  background:#fff;border:1px solid var(--color-border);border-radius:999px;box-shadow:0 6px 20px rgba(1,58,120,.16);
  font-size:15px;font-weight:600;color:var(--color-primary-dark)}
.wegBild .zettel::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;
  background:var(--color-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px}
.wegBild .zettel.ruf::before{background:var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.2 4.5l1.5 3-1.3 1.2a7 7 0 003.9 3.9l1.2-1.3 3 1.5-.6 2.4c-.1.4-.5.6-.9.6A10.5 10.5 0 014.2 6c0-.4.2-.8.6-.9z' fill='%23fff'/%3E%3C/svg%3E") center/20px}
.wegSzene.on .zettel{animation:wegZettel .55s cubic-bezier(.23,1,.32,1) both;animation-delay:calc(var(--t)*1s)}
.wegBild img.wagen{height:76%}
.wegSzene.on .wagen{animation:wegWagen 1.6s cubic-bezier(.2,.8,.2,1) both .2s}
@media (min-width:701px){.wegBild img.eng~.zettelSpalte{top:70%}}
@keyframes wegAuf{from{opacity:0;transform:translateY(10px)}}
@keyframes wegFigur{from{opacity:0;transform:translateY(14px)}}
@keyframes wegZettel{from{opacity:0;transform:translateY(10px) scale(.9)}}
@keyframes wegWagenKlein{from{opacity:0;transform:translateX(-60%)}}
@keyframes wegWagen{from{opacity:0;transform:translateX(-140%)}}

@media (prefers-reduced-motion: reduce){.weg *,.weg *::after{animation:none!important;transition:none!important}.wegKopf .pause{display:none}}
@media (max-width:1023px){
  .wegSzene{grid-template-columns:minmax(0,1fr) minmax(0,390px);gap:14px}
  .wegBild{height:200px}
  .wegBild img{width:180px}
  .zettelSpalte{left:174px}
  .wegBild .zettel{font-size:13px;padding:8px 11px 8px 8px}
  .wegBuehne{padding:8px 26px 0}
}
@media (max-width:700px){
  .hero-top{padding-top:64px}
  .weg{margin-top:26px;border-radius:20px 20px 0 0}
  .wegKopf{padding:8px 6px 0;gap:0}
  .wegKopf .schritt{flex-direction:column;gap:6px;padding:8px 2px 14px;font-size:13px;text-align:center}
  .wegKopf .schritt i{left:6px;right:6px}
  .wegKopf .pause{width:40px}
  .wegBuehne{padding:4px 18px 0}
  .wegSzene{grid-template-columns:1fr;gap:0}
  .wegText{padding:10px 0 22px}
  .wegText .vor,.hero p.hero-lead .nur-breit{display:none}
  .wegText h2{font-size:22px}
  .wegText p{font-size:16.5px;margin-top:8px}
  .wegText .btn{margin-top:14px;width:100%;justify-content:center;white-space:normal}
  /* Telefon: Bild oben, die Zettel als Reihe darunter statt auf den Figuren */
  .wegBild{height:auto;order:-1;margin-top:6px}
  .wegBild img,.wegBild img.wagen,.wegBild img.eng{position:static;display:block;height:128px;width:100%;object-fit:contain;object-position:center}
  .zettelSpalte{position:static;transform:none;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:6px}
  .wegBild img.wagen{height:104px;margin:12px 0}
  .wegSzene.on .wegBild img.fig{animation-name:wegAuf}
  .wegSzene.on .wagen{animation-name:wegWagenKlein}
  .wegBild .zettel{font-size:13px;padding:6px 10px 6px 7px}
  .wegBild .zettel:nth-of-type(3){display:none}
}