/* Unser Bäumchen: Zeichnung und Anordnung. Farben wie die Romera-Postkarte (Creme, Salbei, Ocker, Terrakotta). */
.bm-svg {
  display: block; width: 100%; height: auto; overflow: hidden;
  /* Weicher Rand statt harter Bildkante: das Bild geht ins Papier über. */
  -webkit-mask-image: radial-gradient(ellipse 72% 82% at 50% 66%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 82% at 50% 66%, #000 58%, transparent 100%);
}
/* Beim Laden wachsen Blätter, Blüten und Früchte sanft ein (nur wenn Bewegung erwünscht ist). */
@media (prefers-reduced-motion: no-preference) {
  .bm-leaf, .bm-fx { animation: bm-grow .7s cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--i, 0) * 28ms); transform-box: fill-box; transform-origin: 0 50%; }
  .bm-fx { transform-origin: 50% 50%; }
}
@keyframes bm-grow { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }

/* Abschnitt «Warum gibt es Romera?»: mit Bäumchen zwei Spalten (Text links, Bäumchen rechts), auf dem Handy untereinander.
   Ohne Zahl bleibt der Kasten verborgen und der Abschnitt sieht aus wie bisher (zentrierter Text). */
.about-teaser .bm-card[hidden] { display: none; }
.about-teaser.has-tree { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 36px; align-items: center; text-align: left; }
.about-teaser.has-tree .about-teaser-text p { margin-left: 0; margin-right: 0; }
.about-teaser .bm-card { text-align: center; }
.about-teaser .bm-card .bm-title { font: 700 15px/1.3 Georgia, serif; margin: 0 0 4px; color: #1c1917; }
.about-teaser .bm-card .bm-art { max-width: 250px; margin: 0 auto; }
.about-teaser .bm-card p { max-width: none; margin-left: auto; margin-right: auto; }
.about-teaser .bm-card .bm-line { font: 15px/1.5 Georgia, serif; margin-top: 8px; margin-bottom: 4px; color: #4a4038; }
.about-teaser .bm-card .bm-count { font: 600 15px/1.4 'DM Sans', Arial, sans-serif; margin-bottom: 0; color: #87532c; }
.about-teaser .bm-card .bm-next { font: 13px/1.5 'DM Sans', Arial, sans-serif; margin-top: 4px; margin-bottom: 0; color: #765333; }
.about-teaser .bm-card .bm-next:empty, .about-teaser .bm-card .bm-since:empty { display: none; }
.about-teaser .bm-card .bm-since { font: 12.5px/1.5 'DM Sans', Arial, sans-serif; margin-top: 4px; margin-bottom: 0; color: #7a7066; }
.about-teaser .bm-card .bm-never { font: italic 13px/1.5 Georgia, serif; margin-top: 8px; margin-bottom: 0; color: #6b6259; }
@media (max-width: 800px) {
  .about-teaser.has-tree { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .about-teaser.has-tree .about-teaser-text p { margin-left: auto; margin-right: auto; }
  .about-teaser .bm-card .bm-art { max-width: 300px; }
}