/* =========================================================
   rp-kennenlernen.css: Illustration «Kennenlernen und Bewertung» (Tab 1, Ablauf auf /vermarktung)
   Aufsicht auf den Tisch im Stil der Villa-Skizze. Grundzustand = fertiges Bild (ohne JavaScript und bei
   «Bewegung reduzieren»). Mit rp-kennenlernen.js (Stand 01.10.2026) zeichnet es sich einmal, sobald es sichtbar
   wird (.rpkl-bereit, .rpkl-an); danach folgt der Nachklang (.rpkl-nach): Über beiden Tassen steigt Dampf auf,
   der Finger fährt langsam über den Grundriss zum Fenster und zurück, der Wohnraum glimmt warm auf. Nach rund
   9 s ist alles in Ruhe. .rpkl-halt hält an, solange das Bild nicht sichtbar ist; .rpkl-wieder beim erneuten
   Öffnen des Tabs. Nur transform, opacity und stroke-dashoffset werden animiert.
   Schnipsel: schritte/komponenten/kennenlernen.html (aus src/werkzeuge/gen_kennenlernen.py).
   ========================================================= */

.rpkl {
  --rpkl-blau: #194963;
  --rpkl-licht: #ffd98f;
  --rpkl-ease: cubic-bezier(.22, 1, .36, 1);
  --rpkl-ease-weich: cubic-bezier(.4, 0, .2, 1);
  --rpkl-sinus: cubic-bezier(.37, 0, .63, 1);
  --rpkl-w1: 1.6;
  --rpkl-w2: 1.05;
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  container-type: inline-size;
}
.rpkl-svg { display: block; width: 100%; height: auto; overflow: visible; }
@container (max-width: 560px) { .rpkl-svg { --rpkl-w1: 2.1; --rpkl-w2: 1.4; } }
@container (max-width: 420px) { .rpkl-svg { --rpkl-w1: 2.7; --rpkl-w2: 1.8; } }

/* Striche */
.rpkl-strich path {
  fill: none;
  stroke: var(--rpkl-blau);
  stroke-width: var(--rpkl-w1);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rpkl-strich path.rpkl-fein { stroke-width: var(--rpkl-w2); stroke-opacity: .72; }
.rpkl-strich path.rpkl-mass { stroke: #3a8fb0; stroke-width: var(--rpkl-w2); stroke-opacity: .8; }
.rpkl-strich path.rpkl-maser { stroke-width: var(--rpkl-w2); stroke-opacity: .14; }

/* Flächen */
.rpkl-lampe { fill: url(#rpkl-lampe); }
.rpkl-papier { fill: #fff; }
.rpkl-schatten { fill: var(--rpkl-blau); opacity: .06; }
.rpkl-wohnraum { fill: var(--rpkl-licht); opacity: .42; }
.rpkl-licht { fill: var(--rpkl-licht); }
.rpkl-kaffee { fill: #c9a987; }
.rpkl-crema { fill: #e6d4bb; opacity: .85; }
.rpkl-stift { fill: #e9eef2; }
.rpkl-aermel { fill: #f3f5f7; }
.rpkl-hand { fill: #fff; }

/* Nachklang-Teile im Grundzustand: unsichtbar, das Endbild bleibt genau wie ohne Bewegung */
.rpkl-glimm { fill: var(--rpkl-licht); opacity: 0; }
.rpkl-svg .rpkl-dampf {
  fill: none;
  stroke: var(--rpkl-blau);
  stroke-width: var(--rpkl-w2);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

/* ---------- Bewegung: nur auf Wunsch und nur mit rp-kennenlernen.js ----------
   Tisch und Blätter 0.1 s, Tassen und Hände 0.4 s, Grundriss 0.6 bis 2 s, Stift und Hausskizze bis 2.3 s,
   danach färbt sich der Wohnraum warm und das Fenster der Hausskizze geht an. Nach rund 4.2 s steht das Bild,
   dann folgt der Nachklang (--nt Verzögerung, --nd Dauer, --nz Durchgänge, --na Weite, --no Deckkraft,
   --nx und --ny Weg). Selektoren über Klasse und Typ (wie Villa und Bäume), nicht über [pathLength]. */
@media (prefers-reduced-motion: no-preference) {
  .rpkl.rpkl-bereit .rpkl-strich path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .rpkl.rpkl-an .rpkl-strich path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.2s var(--rpkl-ease) calc(var(--i, 0) * 220ms + 100ms);
  }
  .rpkl.rpkl-bereit .rpkl-lampe,
  .rpkl.rpkl-bereit .rpkl-wohnraum,
  .rpkl.rpkl-bereit .rpkl-licht,
  .rpkl.rpkl-bereit .rpkl-kaffee-g,
  .rpkl.rpkl-bereit .rpkl-schatten,
  .rpkl.rpkl-bereit .rpkl-stift,
  .rpkl.rpkl-bereit .rpkl-haende { opacity: 0; }
  .rpkl.rpkl-an .rpkl-svg .rpkl-schatten { opacity: .06; transition: opacity 1s var(--rpkl-ease-weich) .3s; }
  .rpkl.rpkl-an .rpkl-svg .rpkl-haende { opacity: 1; transition: opacity .8s var(--rpkl-ease-weich) .5s; }
  .rpkl.rpkl-an .rpkl-svg .rpkl-kaffee-g { opacity: 1; transition: opacity 1s var(--rpkl-ease-weich) 1.2s; }
  .rpkl.rpkl-an .rpkl-svg .rpkl-stift { opacity: 1; transition: opacity .8s var(--rpkl-ease-weich) 1.9s; }
  .rpkl.rpkl-an .rpkl-svg .rpkl-lampe { opacity: 1; transition: opacity 1.6s var(--rpkl-ease-weich) 1.4s; }
  .rpkl.rpkl-an .rpkl-svg .rpkl-wohnraum { opacity: .42; transition: opacity 1.2s var(--rpkl-ease-weich) 2.4s; }
  /* Fenster der Hausskizze geht an, mit kurzem Flackern wie das Fenster im Footer */
  .rpkl.rpkl-an .rpkl-svg .rpkl-licht { animation: rpkl-licht 1.3s ease-out 2.9s both; }

  /* ----- Nachklang ----- */
  /* Dampf steigt über den Tassen auf und löst sich auf */
  .rpkl.rpkl-nach .rpkl-n-dampf { animation: rpkl-n-dampf var(--nd, 3.6s) var(--rpkl-sinus) var(--nt, 0s) var(--nz, 2) both; }
  /* Finger fährt über den Grundriss, verweilt, kehrt zurück */
  .rpkl.rpkl-nach .rpkl-n-hin { animation: rpkl-n-hin var(--nd, 5.6s) var(--rpkl-sinus) var(--nt, 0s) both; }
  /* Wohnraum glimmt warm auf */
  .rpkl.rpkl-nach .rpkl-n-atmen { animation: rpkl-n-atmen var(--nd, 3.6s) var(--rpkl-sinus) var(--nt, 0s) var(--nz, 1) both; }
  /* nicht sichtbar (aus dem Bild gescrollt, Browser-Tab im Hintergrund): anhalten */
  .rpkl.rpkl-nach.rpkl-halt .rpkl-n { animation-play-state: paused; }
}
@keyframes rpkl-licht { 0% { opacity: 0; } 14% { opacity: .9; } 22% { opacity: .25; } 34% { opacity: 1; } 100% { opacity: 1; } }
@keyframes rpkl-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, 7px) * -1); }
}
@keyframes rpkl-n-hin { 0%, 100% { translate: 0 0; } 34%, 62% { translate: var(--nx, 0px) var(--ny, 0px); } }
@keyframes rpkl-n-atmen { 0%, 100% { opacity: 0; } 50% { opacity: var(--no, .3); } }

@media (forced-colors: active) {
  .rpkl-svg { forced-color-adjust: none; }
  .rpkl-strich path, .rpkl-svg .rpkl-dampf { stroke: CanvasText; }
  .rpkl-lampe, .rpkl-schatten, .rpkl-wohnraum, .rpkl-glimm { display: none; }
}