/* ============================================================
   DerReinMeister – Hero als Vollbild-Bühne
   Ersetzt die Vorher/Nachher-Karte durch ein durchgehendes
   Hintergrundbild mit dunklem Verlauf für den Text links.
   ============================================================ */

/* ------------------------------------------------------------
   Bildausschnitt steuern
   --rm-hero-x verschiebt das Foto waagerecht.
     50%  = mittig
     kleiner als 50% = Bild wandert nach RECHTS
     größer als 50% = Bild wandert nach LINKS
   Hinweis: Das Foto (2400x1339) hat fast dasselbe Seitenverhältnis
   wie die Hero-Sektion. Mit "cover" gäbe es deshalb keinen seitlichen
   Spielraum – das Bild säße unverrückbar fest. Darum wird es über
   --rm-hero-zoom leicht vergrößert, erst dadurch lässt es sich
   überhaupt verschieben.
   ------------------------------------------------------------ */
:root {
  --rm-hero-zoom: 125%;
  --rm-hero-x: 32%;
}

/* Die Hero-Sektion trägt jetzt das Bild */
section.min-h-\[90dvh\] {
  background-image:
    /* Verlauf links: sorgt für Lesbarkeit der Headline */
    linear-gradient(
      96deg,
      rgba(8, 9, 12, 0.99) 0%,
      rgba(8, 9, 12, 0.97) 26%,
      rgba(8, 9, 12, 0.88) 37%,
      rgba(8, 9, 12, 0.58) 48%,
      rgba(8, 9, 12, 0.24) 64%,
      rgba(8, 9, 12, 0.06) 100%
    ),
    /* Verlauf unten: weicher Übergang in die nächste Sektion */
    linear-gradient(
      to top,
      rgba(8, 9, 12, 0.95) 0%,
      rgba(8, 9, 12, 0.35) 18%,
      transparent 45%
    ),
    url("./hero-fullbleed.webp") !important;
  background-size: auto, auto, auto var(--rm-hero-zoom) !important;
  background-position: center, center, var(--rm-hero-x) center !important;
  background-repeat: no-repeat !important;
  background-color: #08090c;
  min-height: 92dvh;
}

/* Sehr breite Bildschirme (Ultrawide): dort reicht der Zoom nicht mehr,
   um die volle Breite zu füllen – deshalb zurück auf "cover". Seitlicher
   Spielraum besteht in diesem Format ohnehin nicht. */
@media (min-aspect-ratio: 11/5) {
  section.min-h-\[90dvh\] {
    background-size: auto, auto, cover !important;
    background-position: center, center, center !important;
  }
}

/* Dekor-Elemente, die jetzt über dem Foto stören würden */
section.min-h-\[90dvh\] > .absolute.inset-0.opacity-\[0\.12\],
section.min-h-\[90dvh\] > .bg-primary\/20.blur-3xl,
section.min-h-\[90dvh\] > .bg-primary\/10.blur-3xl,
section.min-h-\[90dvh\] > .skew-x-\[-20deg\] {
  display: none !important;
}

/* Die Vorher/Nachher-Karte entfällt */
.rm-hero-visual { display: none !important; }

/* Pill "Premium Glas- & Gebäudereinigung in Leipzig" entfernt */
.rm-hero-grid .inline-flex.rounded-full.bg-secondary { display: none !important; }

/* Text bekommt die volle Bühne links */
.rm-hero-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

.rm-hero-grid > :first-child {
  max-width: 46rem;
}

/* Auf großen Screens Text etwas schmaler halten,
   damit das Gebäude frei steht */
@media (min-width: 1280px) {
  .rm-hero-grid > :first-child { max-width: 42rem; }
}

/* Vertrauens-Badge unten rechts */
.rm-hero-trust {
  position: absolute;
  right: max(2rem, 4vw);
  bottom: 2.5rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.4rem;
  border-radius: 1rem;
  background: rgba(18, 20, 26, 0.55);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.14) inset,
    0 20px 50px -24px rgba(0, 0, 0, 0.95);
}

.rm-hero-trust-star {
  color: #d4af5a;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  line-height: 1;
}

.rm-hero-trust-num {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  color: #fff;
}

.rm-hero-trust-sub {
  font-size: 0.82rem;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 1023px) {
  .rm-hero-trust { display: none; }

  section.min-h-\[90dvh\] {
    background-position: center, center, 68% center !important;
    background-image:
      linear-gradient(
        170deg,
        rgba(8, 9, 12, 0.95) 0%,
        rgba(8, 9, 12, 0.88) 38%,
        rgba(8, 9, 12, 0.62) 70%,
        rgba(8, 9, 12, 0.45) 100%
      ),
      linear-gradient(to top, rgba(8, 9, 12, 0.95), transparent 40%),
      url("./hero-fullbleed.webp") !important;
  }
}