/* ============================================================
   DerReinMeister – Anpassungen an der Oberfläche
   Ergänzt das gebündelte Design, ohne es neu zu bauen.
   Die verwendeten Klassen (.rm-*) sind im JS-Bundle gesetzt.
   ============================================================ */


/* ============================================================
   1. Mobiles Menü als Vollbild-Overlay
   ------------------------------------------------------------
   Vorher klappte das Menü nur als schmales Band unter der
   Kopfzeile auf und der Inhalt darunter blieb sichtbar.
   Jetzt legt es sich über den ganzen Bildschirm, ist leicht
   durchsichtig und der Text steht mittig.
   ============================================================ */

.rm-mobile-menu {
  /* WICHTIG: hier NICHT position:fixed verwenden.
     Die Kopfzeile hat backdrop-blur, und ein Element mit
     backdrop-filter wird selbst zum Bezugsrahmen für fixierte
     Kinder – das Overlay würde dann nur die Kopfzeile abdecken.
     Deshalb bleibt es absolut positioniert (top:100% = direkt
     unter der Kopfzeile) und bekommt die restliche Bildschirm-
     höhe zugewiesen. 100% entspricht dabei der Kopfzeilenhöhe.
     dvh statt vh, damit die Adressleiste mobiler Browser die
     Höhe nicht verfälscht. */
  height: calc(100dvh - 100%);
  z-index: 60;

  /* Leicht durchsichtig mit Weichzeichner dahinter.
     Der zweite Wert ist der Rückfall für Browser ohne
     backdrop-filter – dort etwas kräftiger, damit der Text
     in jedem Fall gut lesbar bleibt. */
  background: rgba(10, 11, 15, 0.88) !important;
  -webkit-backdrop-filter: saturate(140%) blur(20px);
  backdrop-filter: saturate(140%) blur(20px);
  border: 0 !important;
  box-shadow: none !important;

  /* Inhalt mittig – waagerecht wie senkrecht */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem !important;
  text-align: center;

  /* Luft an den Rändern, unten zusätzlich für die Systemleiste. */
  padding: 2rem 1.5rem calc(2.5rem + env(safe-area-inset-bottom)) !important;

  /* Sanft einblenden statt hart erscheinen */
  animation: rm-menu-in 0.22s ease-out;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@keyframes rm-menu-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Menüpunkte: größer, luftiger, mittig */
.rm-mobile-menu > button {
  width: 100%;
  max-width: 22rem;
  padding: 0.9rem 1rem;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  border-radius: 0.75rem;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.rm-mobile-menu > button:active {
  background: rgba(255, 255, 255, 0.06);
}

/* Der letzte Eintrag ist der goldene "Angebot anfordern"-Knopf.
   Er bekommt etwas Abstand nach oben und bleibt gut greifbar. */
.rm-mobile-menu > button:last-child {
  margin-top: 1.25rem;
  font-size: 1.05rem;
  padding: 1rem 1.5rem;
}

/* Solange das Menü offen ist, soll der Hintergrund nicht mitscrollen. */
body:has(.rm-mobile-menu) {
  overflow: hidden;
}

/* Der WhatsApp-Knopf liegt ebenfalls auf z-50 und steht im
   Quelltext nach der Kopfzeile – er würde sonst über dem
   geöffneten Menü schweben. */
body:has(.rm-mobile-menu) .rm-whatsapp {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}


/* ============================================================
   2. Bewertungssektion auf dem Handy
   ------------------------------------------------------------
   Der Kopfbereich stand rechtsbündig und der Google-Kasten war
   unnötig groß. Auf schmalen Bildschirmen jetzt mittig und
   deutlich kompakter.
   ============================================================ */

@media (max-width: 1023px) {

  .rm-reviews-head {
    align-items: center !important;   /* statt items-end (rechtsbündig) */
    text-align: center;
    gap: 1.25rem !important;          /* statt gap-8 */
    margin-bottom: 2.5rem !important; /* statt mb-16 */
  }

  /* Überschriftenblock mittig ausrichten */
  .rm-reviews-head > div:first-child {
    width: 100%;
  }

  /* Der Google-Kasten: kompakter und nur so breit wie nötig */
  .rm-google-rating {
    align-self: center;
    flex-direction: column;
    gap: 0.35rem !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 0.75rem !important;
  }

  /* Sterne mittig und ohne den großen Abstand nach unten */
  .rm-google-rating .flex.gap-1 {
    justify-content: center;
    margin-bottom: 0 !important;
  }

  /* Sterne etwas kleiner */
  .rm-google-rating .flex.gap-1 > svg {
    width: 0.95rem;
    height: 0.95rem;
  }

  /* Die große Durchschnittsnote. Eigene Klasse statt
     :first-child, weil die Note bei leerer Konfiguration gar
     nicht gerendert wird und der Selektor dann den falschen
     Block treffen würde. */
  .rm-rating-num {
    font-size: 1.75rem !important;
    line-height: 1.1;
  }

  .rm-google-rating .text-sm {
    font-size: 0.8rem !important;
  }
}

/* Sehr schmale Geräte: Überschrift noch etwas zurücknehmen,
   damit sie nicht über drei Zeilen läuft. */
@media (max-width: 380px) {
  .rm-reviews-head h3 {
    font-size: 1.6rem !important;
    line-height: 1.15;
  }
}


/* ============================================================
   3. Bewertungshinweis im Hero
   ------------------------------------------------------------
   Steht keine Zahl in window.RM_GOOGLE_REVIEWS, zeigt der Hero
   nur "Bewertungen bei Google". Auf dem Handy etwas kompakter.
   ============================================================ */

@media (max-width: 767px) {
  .rm-hero-rating {
    margin-top: 2rem !important;
  }
}


/* ============================================================
   Instagram – eigene Vorschau-Galerie
   ------------------------------------------------------------
   Die Vorschaubilder liegen unter assets/ig/ auf dem eigenen
   Server. Es wird nichts von Instagram/Meta nachgeladen.
   ============================================================ */

.rm-ig-gallery{max-width:1080px;margin:0 auto;text-align:center}

.rm-ig-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.25rem;
  margin-bottom:1.75rem;
  /* Bei drei Beitraegen nie mehr als drei Spalten, damit die Kacheln
     auf breiten Bildschirmen nicht winzig werden. */
  max-width:840px;
  margin-left:auto;
  margin-right:auto;
}

.rm-ig-card{
  position:relative;
  display:block;
  overflow:hidden;
  /* 3:4 – entspricht dem Zuschnitt der Vorschaubilder in assets/ig/,
     dadurch wird beim Einpassen praktisch nichts abgeschnitten. */
  aspect-ratio:3/4;
  border-radius:1.25rem;
  background:#141414;
  text-decoration:none;
  isolation:isolate;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;
}
.rm-ig-card:hover,
.rm-ig-card:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.75);
}
.rm-ig-card:focus-visible{outline:2px solid #e8c982;outline-offset:3px}

.rm-ig-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.rm-ig-card:hover .rm-ig-img{transform:scale(1.05)}

/* Solange kein Vorschaubild hinterlegt ist (oder es nicht lädt):
   dezente Ersatzfläche statt eines kaputten Bildes. */
.rm-ig-card.is-imageless{
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(212,175,90,.16),transparent 70%),
    linear-gradient(160deg,#1a1a1a,#0f0f0f);
  border:1px dashed rgba(212,175,90,.35);
}

.rm-ig-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:.75rem;
  padding:1.25rem;
  background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.28) 45%,rgba(0,0,0,0) 75%);
}

.rm-ig-play{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  margin-bottom:auto;
  margin-top:auto;
  border-radius:50%;
  color:#161005;
  background:rgba(232,201,130,.94);
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  transform:translateX(2px);
  transition:transform .3s,background .3s;
}
.rm-ig-card:hover .rm-ig-play{background:#e8c982;transform:translateX(2px) scale(1.08)}

.rm-ig-caption{
  font-size:.88rem;
  font-weight:600;
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}

.rm-ig-badge{
  position:absolute;
  top:.85rem;
  left:.85rem;   /* links, weil die Vorschaubilder oben rechts schon
                    das Wiedergabe-Symbol von Instagram zeigen */
  z-index:2;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  color:#fff;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
  line-height:0;
}

.rm-ig-more{
  display:inline-block;
  color:#d4af5a;
  font-weight:600;
  font-size:.92rem;
  text-decoration:none;
}
.rm-ig-more:hover{text-decoration:underline;text-underline-offset:4px}

@media(prefers-reduced-motion:reduce){
  .rm-ig-card,.rm-ig-img,.rm-ig-play{transition:none}
  .rm-ig-card:hover{transform:none}
  .rm-ig-card:hover .rm-ig-img{transform:none}
}