/* =========================================================
   rp-dienste-r.css: Kopf der Startseiten-Section «Unsere Dienstleistungen rund um Immobilien» mit der Logo-Kachel
   (Schritt 67, Nicolas 27.09.2026: «das Mein Logo mit blauem Hintergrund. Mach dort das Bild schön rein. Und dann
   den R mit der Animation»). Links Titel, Einleitung, Knopf; rechts das Logo auf Dunkelblau. Das Fenster im R
   wechselt beim Hineinscrollen mit kurzem Flackern von Hellblau auf warmes Licht (#ffd98f wie im Footer), das
   Licht fällt weich auf die Fläche, danach geht einmal ein Schatten vorbei. Keine Schleife.
   Ohne JavaScript und bei «Bewegung reduzieren»: Licht an, kein Schatten.
   Präfix rfr- (rpr- gehört den Rezensionen). Markup: schritte/67_dienste_r.py, Bild: src/werkzeuge/logo_kachel.py.
   ========================================================= */

/* ---------- Kopf: zwei Spalten ---------- */
.rfr-kopf {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.rfr-kopf-text h2 { max-width: 468px; }
.rfr-lead { margin: 24px 0 0; max-width: 440px; color: #4d464a; font-size: 18px; line-height: 1.65; }
.rfr-kopf .rfr-knopf { margin-top: 32px; }
@media (min-width: 992px) {
  .rfr-lead { font-size: 19px; }
}

/* ---------- Kachel: das Logo auf Petrol wie das Titelbild (30.09.2026, vorher Dunkelblau #192352) ---------- */
.rfr-kachel {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 14px;
  background: #194963;
  box-shadow: 0 34px 60px -34px rgba(12, 36, 52, .55), 0 2px 6px rgba(12, 36, 52, .08);
}
.rfr-kachel picture, .rfr-kachel img { display: block; width: 100%; height: 100%; }
.rfr-kachel img { object-fit: cover; }

/* Warmes Licht, das aus dem Fenster auf die blaue Fläche fällt (Mitte des Fensters bei 14.8 % / 57.9 %) */
.rfr-schein {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 14.85% 57.9%, rgba(255, 214, 150, .34) 0, rgba(255, 200, 130, .14) 7%,
    rgba(255, 190, 120, .05) 15%, rgba(255, 190, 120, 0) 24%);
}

/* Fenster: eigene Ebene genau über den vier hellblauen Scheiben (Werte aus logo_kachel.py) */
.rfr-fenster {
  position: absolute; left: 13.518%; top: 56.032%; width: 2.653%; height: 3.749%;
  filter: drop-shadow(0 0 2px rgba(255, 214, 140, .95)) drop-shadow(0 0 10px rgba(255, 186, 96, .55));
}
.rfr-fenster svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rfr-licht rect { fill: url(#rfr-lampe) #ffd98f; }
.rfr-person { fill: #3a2c1f; opacity: .85; }
.rfr-gehen { transform: translateX(-48px); visibility: hidden; }
.rfr-arm { transform-box: fill-box; transform-origin: 46% 4%; }
.rfr-arm-hinten { transform-origin: 54% 4%; }

/* Grundzustand (auch ohne JS und bei Reduce): Logo wie im Original, Fenster blau, kein Licht. Nicolas 01.10.2026:
   «Normalzustand → Aufleuchten → Normalzustand. Kein dauerhaft heller Zustand nach der Animation.» */
.rfr-licht, .rfr-schein { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  /* Licht weich an (0.35 s), bleibt, bis die Person vorbeigegangen ist (bis rund 6 s), dann weich zurück zum Blau */
  .rfr-kachel.an .rfr-licht { animation: rfr-licht 7s cubic-bezier(.4, 0, .2, 1) .35s both; }
  .rfr-kachel.an .rfr-schein { animation: rfr-schein 7s cubic-bezier(.4, 0, .2, 1) .55s both; }
  .rfr-kachel.an .rfr-gehen { animation: rfr-gehen 3.4s linear 2.2s both; }
  .rfr-kachel.an .rfr-schritt { animation: rfr-schritt .567s ease-in-out 2.2s 6 both; }
  .rfr-kachel.an .rfr-arm-vorn { animation: rfr-arm 1.133s ease-in-out 2.2s 3 both; }
  .rfr-kachel.an .rfr-arm-hinten { animation: rfr-arm-gegen 1.133s ease-in-out 2.2s 3 both; }
}
@keyframes rfr-licht { 0% { opacity: 0; } 4% { opacity: .9; } 6% { opacity: .25; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rfr-schein { 0% { opacity: 0; } 14% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rfr-gehen {
  from { transform: translateX(-48px); visibility: visible; }
  to { transform: translateX(200px); visibility: visible; }
}
@keyframes rfr-schritt { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
@keyframes rfr-arm { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes rfr-arm-gegen { 0%, 100% { transform: rotate(7deg); } 50% { transform: rotate(-7deg); } }

/* ---------- Tablet und Handy: erst die Dienstleistungen, dann das Logo-Bild ----------
   Nicolas 27.09.2026: «in der Mobile-Version bei Unsere Dienstleistungen … mein Logo, also das Bild, nach unten tun
   und die Dienstleistungen nach oben versetzen, und dann diese Pfeilchen, die sind zu nahe am Rand.»
   Der Kopf löst sich auf (display: contents), Text, Liste und Kachel ordnen sich im Container untereinander. */
@media (max-width: 991px) {
  #Dienstleistungen > .w-container { display: flex; flex-direction: column; }
  #Dienstleistungen > .w-container::before,
  #Dienstleistungen > .w-container::after { display: none; }
  .rfr-kopf { display: contents; }
  .rfr-kopf-text { order: 1; }
  #Dienstleistungen .rpd-liste { order: 2; }
  .rfr-kachel { order: 3; width: 100%; max-width: 640px; margin-top: clamp(40px, 8vw, 56px); }
  .rfr-kopf-text h2 { max-width: 560px; }
  /* Pfeile der aufklappbaren Zeilen nicht am Rand kleben lassen */
  #Dienstleistungen .rpd-auf { padding-right: 12px; }
}
@media (max-width: 479px) {
  .rfr-kopf .rfr-knopf .w-button { width: 100%; }
  .rfr-gehen { display: none; }   /* Fenster unter 12 px: nur das Licht */
}