/* roaga-theme: Karte mit Leaflet und OpenStreetMap, erst nach Klick (Fremde Hosts, 24.10.2026) */
.acf-map--bereit .marker {
  display: none; /* Bausteine bleiben im Quelltext (Titel, Adresse), werden aber nur von der Karte benutzt */
}
.acf-map--leer {
  display: none; /* kein gueltiger Ort gespeichert: leeren Rahmen nicht zeigen */
}
.roaga-karte-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
  text-align: center;
  background: #f2f2f2;
}
.roaga-karte-start__hinweis {
  max-width: 34em;
  margin: 12px 0 0;
  font-size: 0.9rem;
}
/* Leaflet macht den Kasten zu einem eigenen Block (overflow: hidden): neben schwebenden Elementen der Seite rutscht er nach unten.
   Darum die Karte absolut in den Kasten legen (wie vorher die Google-Karte). */
.acf-map--bereit {
  position: relative;
  z-index: 0; /* eigener Stapelkontext: Leaflet-Ebenen (z-index 400 bis 1000) bleiben unter der Kopfzeile */
  display: flow-root;
  width: auto;
}
.roaga-karte {
  position: absolute !important; /* Leaflet setzt inline position: relative */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.roaga-karte img,
.roaga-karte-eingabe img {
  max-width: none !important;
}

/* Eingabe (Formular und Backend): Adresse als Text, Ort per Klick in der Karte */
.roaga-karte-eingabe {
  padding: 10px;
  border: 1px solid #ccc;
  background: #fafafa;
}
.roaga-karte-eingabe__zeile {
  margin: 0 0 10px;
}
.roaga-karte-eingabe__adresse {
  width: 100%;
  max-width: 34em;
}
.roaga-karte-eingabe__karte {
  position: relative;
  z-index: 0;
  height: 320px;
  margin: 10px 0;
  border: 1px solid #ccc;
}
.roaga-karte-eingabe__status {
  margin: 0;
  font-size: 0.9rem;
}

/* Herz auf der Startseite und auf "Roaga werden" (frueher animiertes GIF von animierte-gifs.net, Fremde Hosts 24.10.2026).
   Dreifache Groesse, immer mittig in seiner Spalte, dreht sich um die Laengsachse (3 Ebenen mit Abstand ergeben Tiefe). */
.roaga-herz {
  --herz-maske: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  position: relative;
  display: block;
  width: 168px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  color: #d4141c;
  transform-style: preserve-3d;
  animation: roaga-herz-dreh 7s linear infinite;
}
.roaga-herz svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: currentColor;
  transform: translateZ(0);
}
.roaga-herz::before,
.roaga-herz::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-mask: var(--herz-maske) center / 100% 100% no-repeat;
  mask: var(--herz-maske) center / 100% 100% no-repeat;
}
.roaga-herz::before {
  background: #6f090e;
  transform: translateZ(-10px);
}
.roaga-herz::after {
  background: #a40f16;
  transform: translateZ(-5px);
}
@keyframes roaga-herz-dreh {
  from { transform: perspective(800px) rotateY(0deg); }
  to { transform: perspective(800px) rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .roaga-herz { animation: none; }
}