/* =========================================================
   rp-ablauf-anim.css: Linienzeichnungen im Ablauf auf /vermarktung (Präfix rpab-)
   Tab 2 Mandat, Tab 4 Marktauftritt, Tab 5 Verkaufsphase, Tab 6 Abschluss, dazu Option B für Tab 3
   Objektaufnahme (ablauf-aufnahme.html, noch nicht eingebaut).
   Gleicher Stil wie «Kennenlernen» (rp-kennenlernen.css): feine Striche in #194963, warmes Licht #ffd98f,
   Papierweiss, ein Hauch #3a8fb0 für Masslinien, Gold nur für das Abzeichen im Marktauftritt.
   Grundzustand = fertiges Bild (ohne JavaScript und bei «Bewegung reduzieren»).
   Mit rp-ablauf-anim.js (Stand 01.10.2026):
     1. Zeichnen: .rpab-bereit, dann .rpab-an, einmal pro Seitenaufruf (5 bis 6 s).
     2. Nachklang: .rpab-nach, eine ruhige Mikro-Bewegung, die die Geschichte des Schritts erzählt und nach
        zwei bis drei Durchgängen von selbst in Ruhe endet (höchstens rund 9 s). .rpab-halt hält sie an, solange
        das Bild nicht sichtbar ist. .rpab-wieder: erneutes Öffnen des Tabs, ohne die einmaligen Teile.
   Nur transform (translate, scale, rotate), opacity und stroke-dashoffset werden animiert.
   Schnipsel: schritte/komponenten/ablauf-*.html (aus src/werkzeuge/gen_ablauf_animationen.py).
   Die Klasse .rpab-video aus Schritt 76 gehört nicht hierher und kollidiert nicht.
   ========================================================= */

.rpab {
  --rpab-blau: #194963;
  --rpab-licht: #ffd98f;
  --rpab-mass: #3a8fb0;
  --rpab-gold: #a8831c;
  --rpab-gold-flaeche: #f6ebc8;
  --rpab-gold-band: #ecd9a2;
  --rpab-gold-text: #58430f;
  --rpab-ease: cubic-bezier(.22, 1, .36, 1);
  --rpab-ease-weich: cubic-bezier(.4, 0, .2, 1);
  --rpab-sinus: cubic-bezier(.37, 0, .63, 1);
  --rpab-w1: 1.6;
  --rpab-w2: 1.05;
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  container-type: inline-size;
}
.rpab-svg { display: block; width: 100%; height: auto; overflow: hidden; }
@container (max-width: 560px) { .rpab-svg { --rpab-w1: 2.1; --rpab-w2: 1.4; } }
@container (max-width: 420px) { .rpab-svg { --rpab-w1: 2.7; --rpab-w2: 1.8; } }

/* Striche: .rpab-strich zeichnet sich, .rpab-still steht (kommt als Ganzes) */
.rpab-strich path,
.rpab-still path {
  fill: none;
  stroke: var(--rpab-blau);
  stroke-width: var(--rpab-w1);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rpab-svg path.rpab-fein { stroke-width: var(--rpab-w2); stroke-opacity: .72; }
.rpab-svg path.rpab-mass { stroke: var(--rpab-mass); stroke-width: var(--rpab-w2); stroke-opacity: .85; }
.rpab-svg path.rpab-maser { stroke-width: var(--rpab-w2); stroke-opacity: .14; }
.rpab-svg path.rpab-boden { stroke-width: var(--rpab-w2); stroke-opacity: .4; }
.rpab-svg path.rpab-gold { stroke: var(--rpab-gold); }
.rpab-svg path.rpab-gold.rpab-fein { stroke-opacity: .8; }
.rpab-svg path.rpab-weiss { stroke: #fff; stroke-opacity: .95; }

/* Schrift in der Zeichnung: gross genug für 14 px bei 390 px Bildschirmbreite (mindestens 26 Einheiten) */
.rpab-text {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  fill: var(--rpab-blau);
  font-weight: 500;
  letter-spacing: 0;
}
.rpab-text.rpab-gold-text { fill: var(--rpab-gold-text); font-weight: 600; }

/* Flächen */
.rpab-papier { fill: #fff; }
.rpab-schatten { fill: var(--rpab-blau); opacity: .06; }
.rpab-licht { fill: var(--rpab-licht); }
.rpab-warm { fill: var(--rpab-licht); opacity: .55; }
.rpab-hauch { fill: var(--rpab-blau); opacity: .06; }
.rpab-himmel { fill: var(--rpab-mass); opacity: .12; }
.rpab-knopf { fill: var(--rpab-blau); }
.rpab-kaffee { fill: #c9a987; }
.rpab-crema { fill: #e6d4bb; opacity: .85; }
.rpab-stift { fill: #e9eef2; }
.rpab-aermel { fill: #f3f5f7; }
.rpab-hand { fill: #fff; }
.rpab-gold-f { fill: var(--rpab-gold-flaeche); }
.rpab-gold-b { fill: var(--rpab-gold-band); }
.rpab-gold-s { fill: var(--rpab-gold); }
.rpab-stempel-f { fill: var(--rpab-mass); opacity: .08; }
.rpab-kegel { fill: var(--rpab-mass); opacity: .07; }
.rpab-kegel-plan { fill: var(--rpab-mass); opacity: .22; }
.rpab-svg path.rpab-strahl { fill: none; stroke: var(--rpab-mass); stroke-width: var(--rpab-w2); stroke-opacity: .7;
  stroke-dasharray: 5 6; stroke-linecap: round; }
.rpab-glanz { fill: #fff; opacity: 0; }

/* Nachklang-Teile im Grundzustand: unsichtbar oder in Ruhe, das Endbild bleibt genau wie ohne Bewegung */
.rpab-svg path.rpab-nass { stroke: var(--rpab-mass); opacity: 0; }      /* nasse Tinte über der Unterschrift */
.rpab-glimm { fill: var(--rpab-licht); opacity: 0; }                    /* warmes Aufglimmen über einer Fläche */
.rpab-svg .rpab-dampf {                                                 /* Dampf- und Rauchfaden */
  fill: none;
  stroke: var(--rpab-blau);
  stroke-width: var(--rpab-w2);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}
.rpab-svg .rpab-welle { fill: none; stroke: var(--rpab-mass); stroke-width: var(--rpab-w2); opacity: 0; }

/* Animationsklassen sitzen immer auf einer eigenen <g>-Hülle; Skalieren um die eigene Mitte,
   Drehen und Schwingen um einen festen Punkt (transform-origin im Schnipsel, in Einheiten der viewBox) */
.rpab-plopp, .rpab-stempel, .rpab-n-atmen, .rpab-welle { transform-box: fill-box; transform-origin: center; }
.rpab-feder, .rpab-schwingen, .rpab-n-pendel, .rpab-n-tuer, .rpab-n-drehen { transform-box: view-box; }

/* ---------- Bewegung: nur auf Wunsch und nur mit rp-ablauf-anim.js ----------
   Zeichnen: 1.2 s je Linie, Staffel 220 ms über --i (wie Kennenlernen). Weitere Teile über --t (Verzögerung)
   und --d (Dauer) im Schnipsel. Nachklang über --nt (Verzögerung), --nd (Dauer), --nz (Durchgänge),
   --na (Weite), --no (Deckkraft), --ns (Skalierung), --nx und --ny (Weg). */
@media (prefers-reduced-motion: no-preference) {
  .rpab.rpab-bereit .rpab-strich path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .rpab.rpab-bereit .rpab-ein,
  .rpab.rpab-bereit .rpab-rein,
  .rpab.rpab-bereit .rpab-plopp,
  .rpab.rpab-bereit .rpab-licht-an,
  .rpab.rpab-bereit .rpab-feder,
  .rpab.rpab-bereit .rpab-stempel { opacity: 0; }

  .rpab.rpab-an .rpab-strich path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.2s var(--rpab-ease) calc(var(--i, 0) * 220ms + 100ms);
  }
  /* Einblenden (Schatten, Füllungen, Schrift) */
  .rpab.rpab-an .rpab-ein { opacity: 1; transition: opacity var(--d, .8s) var(--rpab-ease-weich) var(--t, 0s); }
  /* Hereingleiten: höchstens 24 px Weg, nur translate und Deckkraft */
  .rpab.rpab-an .rpab-rein { opacity: 1; animation: rpab-rein var(--d, .8s) var(--rpab-ease) var(--t, 0s) both; }
  /* kleines Aufploppen 0.96 auf 1 (Termine, Herz, Abzeichen) */
  .rpab.rpab-an .rpab-plopp { opacity: 1; animation: rpab-plopp var(--d, .55s) var(--rpab-ease) var(--t, 0s) both; }
  /* Licht geht an, mit kurzem Flackern wie das Fenster im Footer */
  .rpab.rpab-an .rpab-licht-an { opacity: 1; animation: rpab-licht 1.3s ease-out var(--t, 0s) both; }
  /* Unterschrift schreibt sich im Takt des Füllers (linear, gleiche Dauer); die Tinte ist noch nass */
  .rpab.rpab-an .rpab-schrift path { animation: rpab-schreiben var(--d, 1.6s) linear var(--t, 0s) both; }
  .rpab.rpab-an .rpab-nass { opacity: .9; }
  .rpab.rpab-an .rpab-feder {
    opacity: 1;
    animation: rpab-auftauchen .45s var(--rpab-ease-weich) var(--t0, 0s) both,
               rpab-feder var(--d, 1.6s) linear var(--t, 0s) both;
  }
  /* Stempel: setzt einmal auf */
  .rpab.rpab-an .rpab-stempel { opacity: 1; animation: rpab-stempel .6s var(--rpab-ease) var(--t, 0s) both; }
  /* Schlüsselbund schwingt einmal aus */
  .rpab.rpab-an .rpab-schwingen { animation: rpab-schwingen 1.6s var(--rpab-ease-weich) var(--t, 0s) both; }
  /* Abzeichen glänzt einmal */
  .rpab.rpab-an .rpab-glanz { animation: rpab-glanz 1.2s var(--rpab-ease-weich) var(--t, 0s) both; }

  /* ----- Nachklang ----- */
  /* Mandat: Tinte trocknet (nur direkt nach dem Unterschreiben, nicht beim erneuten Öffnen) */
  .rpab.rpab-nach:not(.rpab-wieder) .rpab-nass { animation: rpab-n-trocknen var(--nd, 4.2s) var(--rpab-ease-weich) var(--nt, 0s) both; }
  /* Schweben, das von selbst ausklingt (Drohne) */
  .rpab.rpab-nach .rpab-n-schweben { animation: rpab-n-schweben var(--nd, 8.4s) var(--rpab-sinus) var(--nt, 0s) both; }
  /* warmes Atmen (Kalenderblatt, Termine, Lichtkegel) */
  .rpab.rpab-nach .rpab-n-atmen { animation: rpab-n-atmen var(--nd, 3.4s) var(--rpab-sinus) var(--nt, 0s) var(--nz, 1) both; }
  /* Rauch und Dampf steigen auf und lösen sich auf */
  .rpab.rpab-nach .rpab-n-dampf { animation: rpab-n-dampf var(--nd, 3.4s) var(--rpab-sinus) var(--nt, 0s) var(--nz, 2) both; }
  /* ein Glanz wandert über das Abzeichen */
  .rpab.rpab-nach .rpab-n-glanz { animation: rpab-n-glanz var(--nd, 1.6s) var(--rpab-ease-weich) var(--nt, 0s) var(--nz, 1) both; }
  /* Schlüssel schwingt aus */
  .rpab.rpab-nach .rpab-n-pendel { animation: rpab-n-pendel var(--nd, 5.2s) var(--rpab-sinus) var(--nt, 0s) both; }
  /* hin, kurz verweilen, zurück (Inserat scrollt) */
  .rpab.rpab-nach .rpab-n-hin { animation: rpab-n-hin var(--nd, 5.2s) var(--rpab-sinus) var(--nt, 0s) both; }
  /* Tür öffnet sich weiter und schliesst sich wieder */
  .rpab.rpab-nach .rpab-n-tuer { animation: rpab-n-tuer var(--nd, 4.6s) var(--rpab-sinus) var(--nt, 0s) both; }
  /* Blickfeld schwenkt (Kamera, Grundriss) */
  .rpab.rpab-nach .rpab-n-drehen { animation: rpab-n-drehen var(--nd, 4.4s) var(--rpab-sinus) var(--nt, 0s) var(--nz, 2) both; }
  /* ein Ring löst sich vom Häkchen (bestätigt) */
  .rpab.rpab-nach .rpab-n-welle { animation: rpab-n-welle var(--nd, 1.8s) var(--rpab-ease) var(--nt, 0s) both; }
  /* nicht sichtbar (aus dem Bild gescrollt, Browser-Tab im Hintergrund): anhalten */
  .rpab.rpab-nach.rpab-halt .rpab-n { animation-play-state: paused; }
}
@keyframes rpab-rein { from { opacity: 0; translate: var(--dx, 0px) var(--dy, 12px); } }
@keyframes rpab-plopp { from { opacity: 0; scale: .96; } }
@keyframes rpab-licht { 0% { opacity: 0; } 14% { opacity: .9; } 22% { opacity: .25; } 34% { opacity: 1; } 100% { opacity: 1; } }
@keyframes rpab-schreiben { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rpab-auftauchen { from { opacity: 0; } }
@keyframes rpab-feder {
  0% { translate: var(--f0); } 10% { translate: var(--f1); } 20% { translate: var(--f2); } 30% { translate: var(--f3); }
  40% { translate: var(--f4); } 50% { translate: var(--f5); } 60% { translate: var(--f6); } 70% { translate: var(--f7); }
  80% { translate: var(--f8); } 90% { translate: var(--f9); } 100% { translate: 0px 0px; }
}
@keyframes rpab-stempel { 0% { opacity: 0; scale: 1.04; } 55% { opacity: 1; scale: .99; } 100% { opacity: 1; scale: 1; } }
@keyframes rpab-schwingen { 0% { rotate: -9deg; } 35% { rotate: 5deg; } 65% { rotate: -2deg; } 100% { rotate: 0deg; } }
@keyframes rpab-glanz { 0% { opacity: 0; translate: -150px 0; } 25% { opacity: .75; } 75% { opacity: .75; } 100% { opacity: 0; translate: 150px 0; } }

/* Nachklang: Jede Figur beginnt und endet im Grundzustand, darum gibt es beim Auslaufen keinen Sprung */
@keyframes rpab-n-trocknen { from { opacity: .9; } to { opacity: 0; } }
@keyframes rpab-n-schweben {
  0%, 100% { translate: 0 0; }
  12% { translate: 0 calc(var(--na, 3px) * -1); }
  36% { translate: 0 calc(var(--na, 3px) * .6); }
  60% { translate: 0 calc(var(--na, 3px) * -.34); }
  82% { translate: 0 calc(var(--na, 3px) * .12); }
}
@keyframes rpab-n-atmen { 0%, 100% { opacity: 0; scale: 1; } 50% { opacity: var(--no, .5); scale: var(--ns, 1); } }
@keyframes rpab-n-dampf {
  0% { stroke-dashoffset: 1; opacity: 0; translate: 0 0; }
  30% { opacity: var(--no, .5); }
  62% { opacity: var(--no, .5); }
  100% { stroke-dashoffset: -1; opacity: 0; translate: 0 calc(var(--na, 6px) * -1); }
}
@keyframes rpab-n-glanz { 0% { opacity: 0; translate: -150px 0; } 18%, 82% { opacity: .7; } 100% { opacity: 0; translate: 150px 0; } }
@keyframes rpab-n-pendel {
  0%, 100% { rotate: 0deg; }
  14% { rotate: var(--na, 2.4deg); }
  34% { rotate: calc(var(--na, 2.4deg) * -.62); }
  54% { rotate: calc(var(--na, 2.4deg) * .36); }
  76% { rotate: calc(var(--na, 2.4deg) * -.14); }
}
@keyframes rpab-n-hin { 0%, 100% { translate: 0 0; } 34%, 62% { translate: var(--nx, 0px) var(--ny, 0px); } }
@keyframes rpab-n-tuer { 0%, 100% { scale: 1 1; } 34%, 62% { scale: var(--ns, .62) 1; } }
@keyframes rpab-n-drehen { 0%, 100% { rotate: 0deg; } 25% { rotate: var(--na, 8deg); } 75% { rotate: calc(var(--na, 8deg) * -1); } }
@keyframes rpab-n-welle { 0% { opacity: var(--no, .7); scale: 1; } 100% { opacity: 0; scale: var(--ns, 1.45); } }

@media (forced-colors: active) {
  .rpab-svg { forced-color-adjust: none; }
  .rpab-strich path, .rpab-still path, .rpab-svg .rpab-dampf, .rpab-svg path.rpab-strahl { stroke: CanvasText; }
  .rpab-text { fill: CanvasText; }
  .rpab-lampe, .rpab-schatten, .rpab-glanz, .rpab-glimm, .rpab-svg path.rpab-nass, .rpab-svg .rpab-welle,
  .rpab-kegel, .rpab-kegel-plan { display: none; }
}