/* =========================================================
   rp-baeume.css: Zwei Bäume für «Bewertung Ihrer Immobilie»
   Derselbe Baum in zwei Zuständen: links gesund (richtig bewertet), rechts welkend (zu hoch angesetzt).
   Feine Linienzeichnung im Stil der Villa-Skizze. Grundzustand = fertiges Bild (ohne JavaScript und bei
   «Bewegung reduzieren»). Nur mit rp-baeume.js und prefers-reduced-motion: no-preference zeichnet sich das
   Bild einmal beim Hineinscrollen. Schnipsel: schritte/komponenten/baeume.html (aus src/werkzeuge/gen_baeume.py).
   ========================================================= */

.rpb {
  --rpb-blau: #194963;
  --rpb-welk: #6f808b;
  --rpb-laub-hell: #cddccb;
  --rpb-laub: #a3bfa6;
  --rpb-laub-tief: #7fa287;
  --rpb-bluete: #ffd98f;
  --rpb-bluete-rand: #e2b566;
  --rpb-bluete-mitte: #cf9a45;
  --rpb-braun: #b08e68;
  --rpb-braun-tief: #8d6c4e;
  --rpb-salbei-text: #4a7056;   /* 5.61:1 auf Weiss */
  --rpb-braun-text: #86653f;    /* 5.32:1 auf Weiss */
  --rpb-text: #1d1d1f;
  --rpb-leise: #52697a;
  --rpb-ease: cubic-bezier(.22, 1, .36, 1);
  --rpb-ease-weich: cubic-bezier(.4, 0, .2, 1);
  /* Strichstärken in viewBox-Einheiten; die Containerabfragen halten sie bei rund 1.6, 1.2 und 0.9 px */
  --rpb-w1: 1.75;
  --rpb-w2: 1.3;
  --rpb-w3: 1;
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--rpb-text);
  /* die Webflow-Umgebung vererbt am Handy text-align: center */
  text-align: left;
}
.rpb-legende, .rpb-legende p, .rpb-liste, .rpb-liste li { text-align: left; }

.rpb-bild { position: relative; container-type: inline-size; }
.rpb-svg { display: block; width: 100%; height: auto; overflow: visible; }

@container (max-width: 560px) { .rpb-svg { --rpb-w1: 2.2; --rpb-w2: 1.65; --rpb-w3: 1.3; } }
@container (max-width: 440px) { .rpb-svg { --rpb-w1: 2.8; --rpb-w2: 2.1; --rpb-w3: 1.65; } }

/* ---------- Striche ---------- */
.rpb-strich path, .rpb-hinweis path {
  fill: none;
  stroke: var(--rpb-blau);
  stroke-width: var(--rpb-w1);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rpb-ast1b path { stroke-width: calc(var(--rpb-w1) * .9); }
.rpb-ast2 path { stroke-width: var(--rpb-w2); stroke-opacity: .9; }
.rpb-ast3 path { stroke-width: var(--rpb-w3); stroke-opacity: .7; }
.rpb-fein path, .rpb-strich path.rpb-fein { stroke-width: var(--rpb-w3); stroke-opacity: .5; }
.rpb-strich path.rpb-halme { stroke-opacity: .45; }
.rpb-baum-welk .rpb-strich path { stroke: var(--rpb-welk); }

/* Fallspur eines Blattes */
.rpb-spur {
  fill: none;
  stroke: var(--rpb-braun-tief);
  stroke-width: var(--rpb-w3);
  stroke-linecap: round;
  stroke-dasharray: 0 6.5;
  stroke-opacity: .6;
}

/* ---------- Flächen ---------- */
.rpb-lasur { fill: url(#rpb-lasur-verlauf); stroke: none; }
.rpb-schatten { fill: url(#rpb-schatten-verlauf); }
.rpb-schatten-welk { opacity: .6; }

/* Laub: Umriss (Linie) und drei zurückhaltende Salbeitöne, Licht von oben links */
.rpb-bl { fill: #fff; stroke: var(--rpb-blau); stroke-width: var(--rpb-w3); stroke-opacity: .7; stroke-linejoin: round; }
.rpb-t1 { fill: var(--rpb-laub-hell); }
.rpb-t2 { fill: var(--rpb-laub); }
.rpb-t3 { fill: var(--rpb-laub-tief); }
.rpb-busch, .rpb-bluete { transform-box: fill-box; transform-origin: center; }
.rpb-bluete-blatt { fill: var(--rpb-bluete); stroke: var(--rpb-bluete-rand); stroke-width: .6; }
.rpb-bluete-mitte { fill: var(--rpb-bluete-mitte); }

.rpb-braun { fill: var(--rpb-braun); }
.rpb-braun-tief { fill: var(--rpb-braun-tief); }
.rpb-fahl { fill: #fff; stroke: var(--rpb-welk); stroke-width: var(--rpb-w3); stroke-opacity: .75; stroke-linejoin: round; }

/* fallende Blätter: Ursprung im Ruhepunkt am Boden */
.rpb-fall, .rpb-pendel { transform-box: view-box; transform-origin: var(--ox) var(--oy); }

/* ---------- Hinweislinien und Marken ---------- */
.rpb-hinweis path { stroke-width: var(--rpb-w3); stroke-opacity: .85; }
.rpb-hinweis-links path { stroke: var(--rpb-salbei-text); }
.rpb-hinweis-links circle { fill: var(--rpb-salbei-text); }
.rpb-hinweis-rechts path { stroke: var(--rpb-braun-text); }
.rpb-hinweis-rechts circle { fill: var(--rpb-braun-text); }

.rpb-marke, .rpb-nr {
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border: 1.25px solid currentColor;
  border-radius: 50%;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rpb-marke { position: absolute; left: var(--x); top: var(--y); margin: -12px 0 0 -12px; pointer-events: none; }
.rpb-marke-links, .rpb-spalte-gesund .rpb-nr { color: var(--rpb-salbei-text); }
.rpb-marke-rechts, .rpb-spalte-welk .rpb-nr { color: var(--rpb-braun-text); }

/* ---------- Beschriftung: zwei Spalten unter den Bäumen, schmal untereinander ---------- */
.rpb-legende {
  container: rpb-legende / inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 28px;
  row-gap: 30px;
  margin-top: 22px;
}
@container rpb-legende (max-width: 540px) {
  .rpb-legende > .rpb-spalte { grid-column: 1 / -1; }
}
.rpb-spalte::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: 12px;
  border-radius: 2px;
  background: var(--rpb-laub-tief);
}
.rpb-spalte-welk::before { background: var(--rpb-braun); }
.rpb-titel {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: #151314;
}
.rpb-satz {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--rpb-leise);
}
.rpb-liste {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rpb-liste li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--rpb-text);
}
.rpb-liste strong { font-weight: 600; }
/* Ohne Nummern (Nicolas 30.09.2026: «das 1, 2, 3 … braucht es eigentlich nicht»): farbiger Punkt je Spalte */
.rpb-liste.rpb-ohne-nr li { grid-template-columns: 8px minmax(0, 1fr); column-gap: 12px; }
.rpb-liste.rpb-ohne-nr li::before { content: ""; width: 7px; height: 7px; margin-top: .62em; border-radius: 50%; background: currentColor; }
.rpb-spalte-gesund .rpb-ohne-nr li::before { background: var(--rpb-salbei-text); }
.rpb-spalte-welk .rpb-ohne-nr li::before { background: var(--rpb-braun-text); }

/* ---------- Bewegung: nur auf Wunsch und nur mit rp-baeume.js (Klasse .rpb-bereit) ----------
   Ablauf ab Sichtbarkeit: Boden und Stamm 0.1 s, Äste bis rund 2 s, Laubbüschel 1 bis 2.6 s, Blüten 2.3 bis 4 s,
   drei Blätter lösen sich ab 2 s und liegen spätestens nach 4.9 s am Boden. Danach steht das Bild still.
   Selektoren über Klasse und Typ wie bei der Villa, nicht über [pathLength]: Chrome wendet Attribut-Selektoren
   auf SVG nach einem Klassenwechsel am Vorfahren nicht zuverlässig neu an. */
@media (prefers-reduced-motion: no-preference) {
  .rpb.rpb-bereit .rpb-strich path,
  .rpb.rpb-bereit .rpb-hinweis path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .rpb.rpb-an .rpb-strich path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.3s var(--rpb-ease) calc(var(--i, 0) * 170ms + 120ms);
  }
  .rpb.rpb-an .rpb-hinweis path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .9s var(--rpb-ease) calc(2.4s + var(--i, 0) * 110ms);
  }

  .rpb.rpb-bereit .rpb-lasur,
  .rpb.rpb-bereit .rpb-schatten,
  .rpb.rpb-bereit .rpb-spur,
  .rpb.rpb-bereit .rpb-hinweis circle,
  .rpb.rpb-bereit .rpb-marke { opacity: 0; }
  .rpb.rpb-an .rpb-baum .rpb-schatten { opacity: 1; transition: opacity 1.4s var(--rpb-ease-weich) .5s; }
  .rpb.rpb-an .rpb-baum .rpb-schatten-welk { opacity: .6; }
  .rpb.rpb-an .rpb-baum .rpb-lasur { opacity: 1; transition: opacity 1.2s var(--rpb-ease-weich) 1.7s; }
  .rpb.rpb-an .rpb-baum-welk .rpb-spur { opacity: 1; transition: opacity 1.6s var(--rpb-ease-weich) 2.4s; }
  .rpb.rpb-an .rpb-hinweis circle,
  .rpb.rpb-an .rpb-bild .rpb-marke {
    opacity: 1;
    transition: opacity .6s var(--rpb-ease-weich) calc(2.5s + var(--i, 0) * 110ms);
  }

  /* Laubbüschel wachsen vom Stamm nach aussen (--k: 0 bis 1) */
  .rpb.rpb-bereit .rpb-laub .rpb-busch,
  .rpb.rpb-bereit .rpb-blueten .rpb-bluete { opacity: 0; transform: scale(.8); }
  .rpb.rpb-an .rpb-laub .rpb-busch {
    opacity: 1;
    transform: none;
    transition: opacity .7s var(--rpb-ease-weich) calc(1s + var(--k, 0) * 1.4s),
                transform .9s var(--rpb-ease) calc(1s + var(--k, 0) * 1.4s);
  }
  .rpb.rpb-an .rpb-blueten .rpb-bluete {
    opacity: 1;
    transform: none;
    transition: opacity .8s var(--rpb-ease-weich) calc(2.3s + var(--k, 0) * .8s),
                transform 1s var(--rpb-ease) calc(2.3s + var(--k, 0) * .8s);
  }

  /* welkes Laub erscheint mit den Zweigen */
  .rpb.rpb-bereit .rpb-laub-welk path { opacity: 0; }
  .rpb.rpb-an .rpb-laub-welk path { opacity: 1; transition: opacity .8s var(--rpb-ease-weich) calc(1.3s + var(--k, 0) * .9s); }
  .rpb.rpb-an .rpb-laub-welk path.rpb-liegt { transition-delay: calc(.7s + var(--k, 0) * .5s); }

  /* fallende Blätter: hängen zuerst am Zweig, lösen sich, pendeln zu Boden und bleiben liegen */
  .rpb.rpb-bereit .rpb-fall { opacity: 0; transform: translate(var(--x0), var(--y0)) rotate(var(--r0)); }
  .rpb.rpb-an .rpb-fall {
    opacity: 1;
    transition: opacity .8s var(--rpb-ease-weich) 1s;
    animation: rpb-fall var(--dauer, 2.5s) cubic-bezier(.42, 0, .4, 1) var(--t, 2s) both;
  }
  .rpb.rpb-an .rpb-pendel { animation: rpb-pendel var(--dauer, 2.5s) ease-in-out var(--t, 2s) both; }
}

@keyframes rpb-fall {
  from { transform: translate(var(--x0), var(--y0)) rotate(var(--r0)); }
  to { transform: none; }
}
/* Stützpunkte müssen zu PENDEL_STOPS in src/werkzeuge/gen_baeume.py passen (Fallspur) */
@keyframes rpb-pendel {
  0% { transform: none; }
  22% { transform: translateX(var(--s)) rotate(var(--w)); }
  50% { transform: translateX(calc(var(--s) * -.8)) rotate(calc(var(--w) * -.8)); }
  76% { transform: translateX(calc(var(--s) * .45)) rotate(calc(var(--w) * .45)); }
  100% { transform: none; }
}

/* Windows-Kontrastmodus: Zeichnung in Systemfarben */
@media (forced-colors: active) {
  .rpb-svg { forced-color-adjust: none; }
  .rpb-svg path, .rpb-svg circle { stroke: CanvasText; }
  .rpb-t1, .rpb-t2, .rpb-t3, .rpb-bluete-blatt, .rpb-bluete-mitte, .rpb-braun, .rpb-braun-tief,
  .rpb-hinweis circle { fill: CanvasText; stroke: none; }
  .rpb-bl, .rpb-fahl { fill: Canvas; }
  .rpb-lasur, .rpb-schatten { display: none; }
}