/* ============================================================
   DerReinMeister – Korrekturen und Ergänzungen (August 2026)
   ------------------------------------------------------------
   Diese Datei wird auf allen Seiten geladen und enthält:
     1. Die feste Kontaktleiste am unteren Rand (nur Handy)
     2. Die Datenschutz-Einwilligung im Kontaktformular
     3. Platz für das Cookie-Banner, damit es nichts verdeckt
     4. Kleinigkeiten am Kundenstimmen-Band
   ============================================================ */

/* ------------------------------------------------------------
   1. Feste Kontaktleiste – Anrufen · WhatsApp · Angebot
   Erscheint nur auf Handys und Tablets bis 767 px. Sie wird
   von rm-fixes.js in die Seite eingehängt.
   ------------------------------------------------------------ */
.rm-callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147482000;          /* unter dem Cookie-Banner, über allem anderen */
  display: none;                /* Grundzustand: aus, s. Media Query unten */
  background: rgba(12, 13, 17, 0.97);
  border-top: 1px solid rgba(212, 175, 90, 0.35);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45);
  padding-bottom: env(safe-area-inset-bottom);
}
@supports (backdrop-filter: blur(10px)) {
  .rm-callbar { backdrop-filter: saturate(140%) blur(10px); }
}

.rm-callbar-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.rm-callbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 60px;
  padding: 9px 4px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-decoration: none;
  color: #ececec;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease;
}
.rm-callbar a + a { border-left: 1px solid rgba(255, 255, 255, 0.09); }
.rm-callbar a:active { background: rgba(255, 255, 255, 0.07); }
.rm-callbar a:focus-visible { outline: 2px solid #e8c982; outline-offset: -3px; }

.rm-callbar svg { width: 21px; height: 21px; display: block; }

/* Die Angebots-Schaltfläche ist die Hauptaktion und trägt Gold. */
.rm-callbar .rm-callbar-cta { color: #d4af5a; }
.rm-callbar .rm-callbar-wa   { color: #4ede81; }

@media (max-width: 767px) {
  .rm-callbar { display: block; }

  /* Fußbereich freihalten, damit die Leiste nichts überdeckt. */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

  /* Der runde WhatsApp-Knopf wäre neben der Leiste doppelt. */
  .rm-whatsapp { display: none !important; }
}

/* Solange das Cookie-Banner offen ist, tritt die Leiste zurück –
   sonst stünden zwei Balken übereinander. */
html.rm-consent-offen .rm-callbar { display: none; }

/* ------------------------------------------------------------
   2. Cookie-Banner: Platz schaffen statt überdecken
   Der Hero ist senkrecht zentriert. Bekommt er unten so viel
   Innenabstand wie das Banner hoch ist, rutscht sein Inhalt
   nach oben und die beiden Schaltflächen bleiben sichtbar.
   ------------------------------------------------------------ */
html.rm-consent-offen [data-rm-hero] {
  padding-bottom: var(--rm-consent-h, 0px);
}
@media (min-width: 768px) {
  html.rm-consent-offen [data-rm-hero] { padding-bottom: 0; }
}

/* ------------------------------------------------------------
   3. Datenschutz-Einwilligung im Kontaktformular
   ------------------------------------------------------------ */
.rm-consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: hsl(var(--muted-foreground, 220 10% 60%));
  cursor: pointer;
}
.rm-consent-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #d4af5a;
  cursor: pointer;
}
.rm-consent-check a {
  color: #b8912f;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rm-consent-check a:hover { color: #d4af5a; }

/* ------------------------------------------------------------
   4. Kundenstimmen-Band
   Das Band läuft dauerhaft weiter. Wer eine Bewertung zu Ende
   lesen will, hält es jetzt durch Antippen oder Zeigen an.
   ------------------------------------------------------------ */
.rm-marquee:hover .rm-track,
.rm-marquee:focus-within .rm-track,
.rm-marquee:active .rm-track {
  animation-play-state: paused;
}
@media (max-width: 640px) {
  /* Mehr Textbreite auf schmalen Bildschirmen */
  .rm-marquee .rm-card .p-8 { padding: 1.25rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rm-marquee .rm-track { animation: none !important; }
}

/* ------------------------------------------------------------
   5. Lange Wörter umbrechen
   "Datenschutzerklärung" als Überschrift war auf schmalen
   Bildschirmen breiter als der Bildschirm und hat die ganze
   Seite seitlich verschiebbar gemacht.
   ------------------------------------------------------------ */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
}
@media (max-width: 520px) {
  h1, h2 { hyphens: auto; -webkit-hyphens: auto; }
}

/* ------------------------------------------------------------
   6. Breite Tabellen im Magazin
   Die Tabelle scrollt in ihrem eigenen Rahmen, die Seite bleibt
   ruhig. Der Rahmen wird von rm-fixes.js gesetzt.
   ------------------------------------------------------------ */
.rm-tabelle-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.rm-tabelle-scroll:focus-visible { outline: 2px solid #d4af5a; outline-offset: 3px; }
.rm-tabelle-scroll > table { min-width: 100%; }