/* ============================================================
   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. Social-Media-Schaltflaechen im Hero
   ------------------------------------------------------------
   An der Stelle, an der frueher die Google-Sterne standen, stehen
   jetzt dieselben Social-Media-Symbole wie im Footer.
   ============================================================ */

.rm-hero-social {
  align-items: center;
}

/* Kleiner Hinweis vor den Symbolen. */
.rm-hero-social::before {
  content: "Folgen";
  margin-right: .35rem;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(212, 175, 90, .85);
}

/* Grundoptik der Schaltflaechen: dezenter Goldrahmen, leichter
   Glanz von oben. Beim Ueberfahren hebt sich die Flaeche an und
   nimmt die Farbe des jeweiligen Netzwerks an. */
.rm-hero-social > a {
  width: 46px !important;
  height: 46px !important;
  border-color: rgba(212, 175, 90, .32) !important;
  color: #e8c982 !important;
  background:
    linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,0) 55%),
    rgba(20, 20, 20, .72) !important;
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .25s cubic-bezier(.2,.7,.3,1),
              box-shadow .25s, border-color .25s, color .25s, background-color .25s;
}

.rm-hero-social > a:hover,
.rm-hero-social > a:focus-visible {
  transform: translateY(-3px);
  border-color: currentColor !important;
  box-shadow: 0 14px 28px -14px rgba(0,0,0,.95);
}

.rm-hero-social > a:focus-visible {
  outline: 2px solid #e8c982;
  outline-offset: 3px;
}

/* Farben der einzelnen Netzwerke beim Ueberfahren. */
.rm-hero-social > a[href*="wa.me"]:hover        { color: #25D366 !important; }
.rm-hero-social > a[href*="instagram"]:hover    { color: #E1306C !important; }
.rm-hero-social > a[href*="tiktok"]:hover       { color: #ffffff !important; }
.rm-hero-social > a[href*="youtube"]:hover      { color: #FF0000 !important; }

.rm-hero-social > a svg {
  width: 21px;
  height: 21px;
}
.rm-hero-social > a[href*="tiktok"] svg {
  width: 18px;
  height: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .rm-hero-social > a,
  .rm-hero-social > a:hover { transform: none; transition: none; }
}

@media (max-width: 767px) {
  .rm-hero-social {
    margin-top: 2rem !important;
    gap: .6rem !important;
  }
  .rm-hero-social > a {
    width: 42px !important;
    height: 42px !important;
  }
}


/* ============================================================
   FOOTER – kompakte Fassung fuer das Handy
   ------------------------------------------------------------
   Auf kleinen Bildschirmen stand bisher jede Spalte untereinander,
   dadurch war der Footer sehr lang. Logo-Block, Navigation und
   Kontakt entfallen deshalb auf dem Handy – all das steht bereits
   weiter oben auf der Seite. Uebrig bleiben die Social-Media-
   Schaltflaechen sowie Copyright, Impressum und Datenschutz.
   Ab Tablet-Breite bleibt der Footer unveraendert.
   ============================================================ */
@media (max-width: 767px) {
  #root footer {
    padding-top: 1.75rem;
    padding-bottom: 1.25rem;
  }

  /* Spalte 1 = Logo/Beschreibung, 2 = Navigation, 3 = Kontakt */
  #root footer .grid > div:nth-child(1),
  #root footer .grid > div:nth-child(2),
  #root footer .grid > div:nth-child(3) {
    display: none;
  }

  #root footer .grid {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 1.25rem;
  }

  /* Social Media – mittig, ohne Ueberschrift. */
  #root footer .grid > div:nth-child(4) h4 {
    display: none;
  }
  #root footer .grid > div:nth-child(4) > div {
    justify-content: center;
    gap: .9rem;
  }

  /* Untere Zeile (Copyright, Impressum, Datenschutz) enger. */
  #root footer .border-t {
    padding-top: 1.25rem;
    gap: .5rem;
  }
}


/* ============================================================
   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}

/* ------------------------------------------------------------
   Darstellung
   Laptop/Desktop: alle vier Videos nebeneinander in einer Reihe.
   Handy: eine Kachel gross im Bild, seitliches Wischen bzw. die
   beiden Pfeiltasten blaettern zum naechsten Video.
   ------------------------------------------------------------ */
.rm-ig-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.25rem;
  margin-bottom:1.75rem;
  max-width:1080px;
  margin-left:auto;
  margin-right:auto;
}

/* Wrapper, damit die Pfeiltasten am Rand der Galerie sitzen. */
.rm-ig-carousel{position:relative}

/* Pfeiltasten – nur auf dem Handy sichtbar (siehe Media Query). */
.rm-ig-arrow{
  display:none;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:42px;
  height:42px;
  padding:0;
  border:none;
  border-radius:50%;
  color:#161005;
  background:rgba(232,201,130,.94);
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  cursor:pointer;
  place-items:center;
  line-height:0;
  transition:opacity .2s,background .2s;
}
.rm-ig-arrow:disabled{opacity:.35;cursor:default}
.rm-ig-arrow--prev{left:-4px}
.rm-ig-arrow--next{right:-4px}
.rm-ig-arrow:focus-visible{outline:2px solid #e8c982;outline-offset:3px}

@media (max-width:767px){
  .rm-ig-grid{
    display:flex;
    gap:1rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    scrollbar-width:none;
    padding:.25rem .25rem 1rem;
    /* Damit die erste und letzte Kachel mittig einrasten koennen. */
    scroll-padding-inline:.25rem;
  }
  .rm-ig-grid::-webkit-scrollbar{display:none}

  .rm-ig-grid > .rm-ig-card{
    flex:0 0 78%;
    scroll-snap-align:center;
  }

  .rm-ig-arrow{display:grid}
}

@media (min-width:768px) and (max-width:1023px){
  .rm-ig-grid{grid-template-columns:repeat(2,1fr);max-width:620px}
}

.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}
}

/* ============================================================
   VIDEO-FENSTER (Lightbox)
   Das Video laeuft auf der eigenen Seite in einem Fenster ueber
   dem Inhalt. Der Player wird erst beim Klick geladen – beim
   blossen Aufruf der Seite passiert weiterhin nichts.
   ============================================================ */
.rm-ig-lb{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(.75rem,3vw,2rem);
  background:rgba(6,6,6,.88);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .22s ease;
}
.rm-ig-lb.is-open{opacity:1}

.rm-ig-lb-inner{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
  width:100%;
  max-width:min(430px,calc((100vh - 8rem) * 9 / 16));
  transform:translateY(12px) scale(.98);
  transition:transform .26s cubic-bezier(.2,.7,.3,1);
}
.rm-ig-lb.is-open .rm-ig-lb-inner{transform:none}

/* Hochformat 9:16 – passt zu YouTube Shorts. */
.rm-ig-lb-frame{
  position:relative;
  width:100%;
  aspect-ratio:9/16;
  max-height:calc(100vh - 8rem);
  overflow:hidden;
  border-radius:1.25rem;
  background:#000;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.9);
}
.rm-ig-lb-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.rm-ig-lb-close{
  position:absolute;
  top:-3rem;
  right:0;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  padding:0;
  border:none;
  border-radius:50%;
  color:#161005;
  background:rgba(232,201,130,.94);
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  cursor:pointer;
  line-height:0;
  transition:background .2s,transform .2s;
}
.rm-ig-lb-close:hover{background:#e8c982;transform:scale(1.06)}
.rm-ig-lb-close:focus-visible{outline:2px solid #e8c982;outline-offset:3px}

.rm-ig-lb-note{
  margin:0;
  font-size:.78rem;
  line-height:1.5;
  color:rgba(255,255,255,.62);
  text-align:center;
}
.rm-ig-lb-note a{color:#d4af5a;text-decoration:none;font-weight:600;white-space:nowrap}
.rm-ig-lb-note a:hover{text-decoration:underline;text-underline-offset:3px}

/* Auf kleinen Displays ist oben kein Platz fuer die Taste –
   sie sitzt dann innerhalb des Fensters oben rechts. */
@media (max-width:640px),(max-height:720px){
  .rm-ig-lb-close{top:.6rem;right:.6rem;width:38px;height:38px;z-index:2}
}

@media(prefers-reduced-motion:reduce){
  .rm-ig-lb,.rm-ig-lb-inner,.rm-ig-lb-close{transition:none}
  .rm-ig-lb-inner{transform:none}
}

/* ============================================================
   KONTAKT – antippbare Angaben
   Telefon, E-Mail und Adresse sind Links. Damit das auch sichtbar
   ist, bekommen sie eine eigene Optik: heller Text, feine
   Unterstreichung und ein kleiner Hinweis darunter. Auf dem Handy
   startet ein Tipp direkt den Anruf, die Mail bzw. Google Maps.
   ============================================================ */
.rm-contact-link{
  display:inline-block;
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.45);
  padding-bottom:2px;
  transition:border-color .2s, opacity .2s;
}
.rm-contact-link:hover,
.rm-contact-link:focus-visible{
  border-bottom-color:#fff;
  opacity:.92;
}
.rm-contact-link--block{
  display:inline-block;
  line-height:1.5;
  border-bottom:none;
}
.rm-contact-link--block:hover,
.rm-contact-link--block:focus-visible{
  text-decoration:underline;
  text-underline-offset:4px;
}

/* Kleiner Hinweis unter der Angabe */
.rm-contact-hint{
  display:block;
  margin-top:6px;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.04em;
  color:rgba(255,255,255,.65);
  border-bottom:none;
}
.rm-contact-hint::after{
  content:" →";
  display:inline-block;
  transition:transform .2s;
}
.rm-contact-link:hover .rm-contact-hint{color:#fff}
.rm-contact-link:hover .rm-contact-hint::after{transform:translateX(3px)}

/* Auf Touch-Geräten größere Trefferfläche */
@media (hover:none){
  .rm-contact-link{padding:2px 0 4px}
}
@media(prefers-reduced-motion:reduce){
  .rm-contact-link,.rm-contact-hint::after{transition:none}
}

/* ============================================================
   4. YouTube-Banner unter den Videos
   ------------------------------------------------------------
   Breiter Abo-Banner nach Kundenentwurf: echtes Foto links,
   Kurztext in der Mitte, goldener Abo-Knopf rechts.
   ============================================================ */

.rm-yt-cta {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 1080px;
  margin: 3rem auto 0;
  padding: 1.75rem 2rem;
  border: 1px solid rgba(212, 175, 90, .45);
  border-radius: 22px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,0) 55%),
    rgba(16, 16, 16, .8);
  box-shadow: 0 22px 54px -30px rgba(0,0,0,.95);
}

.rm-yt-cta-img {
  width: 132px;
  height: 132px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 14%;
  border: 3px solid rgba(212, 175, 90, .6);
}

.rm-yt-cta-txt { flex: 1 1 auto; min-width: 0; text-align: left; }

.rm-yt-cta-head {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #e8c982;
}
.rm-yt-cta-head span { color: #ffffff; }

.rm-yt-cta-sub {
  margin: .6rem 0 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: rgba(255,255,255,.7);
  max-width: 34ch;
}

.rm-yt-cta-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1.6rem;
  border-radius: 14px;
  color: #14110b;
  background: linear-gradient(180deg, #f0d089, #d4af5a);
  box-shadow: 0 14px 30px -16px rgba(212,175,90,.95);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, filter .25s;
}
.rm-yt-cta-btn:hover,
.rm-yt-cta-btn:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 20px 36px -18px rgba(212,175,90,1);
}
.rm-yt-cta-btn:focus-visible { outline: 2px solid #e8c982; outline-offset: 3px; }

.rm-yt-cta-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 28px;
  border-radius: 7px;
  background: #ff0000;
  color: #ffffff;
}

.rm-yt-cta-btn-txt { display: flex; flex-direction: column; line-height: 1.2; }
.rm-yt-cta-btn-txt strong { font-size: 1.08rem; font-weight: 700; }
.rm-yt-cta-btn-txt span { font-size: .88rem; font-weight: 500; opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .rm-yt-cta-btn, .rm-yt-cta-btn:hover { transform: none; transition: none; }
}

@media (max-width: 900px) {
  .rm-yt-cta {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 1.25rem;
    padding: 1.5rem 1.25rem;
  }
  .rm-yt-cta-img { width: 96px; height: 96px; }
  .rm-yt-cta-txt { flex: 1 1 100%; text-align: center; }
  .rm-yt-cta-sub { max-width: none; }
  .rm-yt-cta-btn { flex: 1 1 100%; justify-content: center; }
}

/* ============================================================
   5. Kanal-Leiste "Folge mir auf allen Kanaelen"
   ------------------------------------------------------------
   Benannte Kacheln mit Markenfarben statt runder Symbole.
   ============================================================ */

.rm-channels { max-width: 1080px; margin: 3rem auto 0; }

.rm-channels-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.1rem;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #e8c982;
  white-space: nowrap;
}
.rm-channels-title::before,
.rm-channels-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,90,.55));
}
.rm-channels-title::after { background: linear-gradient(90deg, rgba(212,175,90,.55), transparent); }

.rm-channels-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
}

.rm-channel {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  padding: .8rem 1rem;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(20, 20, 20, .8);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s, box-shadow .25s;
}
.rm-channel:hover,
.rm-channel:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(212,175,90,.45);
  box-shadow: 0 16px 30px -18px rgba(0,0,0,.95);
}
.rm-channel:focus-visible { outline: 2px solid #e8c982; outline-offset: 3px; }

.rm-channel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #ffffff;
}
.rm-channel--youtube   .rm-channel-icon { background: #ff0000; }
.rm-channel--tiktok    .rm-channel-icon { background: #010101; border: 1px solid rgba(255,255,255,.18); }
.rm-channel--instagram .rm-channel-icon { background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); }
.rm-channel--whatsapp  .rm-channel-icon { background: #25d366; }
.rm-channel--facebook  .rm-channel-icon { background: #1877f2; }

.rm-channel-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rm-channel-txt strong {
  font-size: .98rem;
  font-weight: 700;
  color: #f2f2f2;
}
.rm-channel-txt span {
  font-size: .82rem;
  color: rgba(255,255,255,.55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .rm-channel, .rm-channel:hover { transform: none; transition: none; }
}

@media (max-width: 1023px) {
  .rm-channels-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .rm-channels-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .rm-channels-title { font-size: .82rem; }
  .rm-channel { padding: .7rem .8rem; gap: .6rem; }
  .rm-channel-icon { width: 34px; height: 34px; }
}