/* ============================================================
   rawe hermetics — Consent-Ebene
   ------------------------------------------------------------
   Gehoert zu assets/rh-consent.js. Alle Klassen beginnen mit
   rh-cs- und koennen daher nicht mit tailwind.css, den
   rh-Farb-Utilities oder rh-form.css kollidieren.

   Stapelung gegen die bestehende Conversion-Ebene:
     .rh-mobile-bar   z-index 60   (Mobil-CTA-Leiste)
     .rh-fab          z-index 55   (WhatsApp, Desktop)
     .rh-overlay      z-index 200  (Rueckruf-Overlay)
     .rh-cs-chat      z-index 55   (Chat, Desktop, ueber dem FAB)
     .rh-cs-bar       z-index 300  (Consent-Leiste, immer oben)

   Farben kommen aus den Bereichsvariablen der Seite
   (--rh-blue ist auf Elektro-Seiten Signal-Gelb), damit hier
   keine Farbwerte doppelt gepflegt werden.
   ============================================================ */

/* ============================================================
   1. CONSENT-LEISTE
   Schmale Leiste am unteren Rand. Kein Interstitial, keine
   Cookie-Wall: die Seite bleibt ohne Zustimmung vollstaendig
   nutzbar, Formular und Telefon funktionieren unabhaengig.
   ============================================================ */
.rh-cs-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  background: var(--rh-black, #1a1a1a);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.34);
  color: rgba(255, 255, 255, 0.86);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);
  transition: transform 0.34s var(--rh-ease, cubic-bezier(0.16, 1, 0.3, 1));
  max-height: 88vh;
  overflow-y: auto;
}
.rh-cs-bar.is-visible { transform: translateY(0); }

/* Solange die Leiste steht, darf sie die bestehende Conversion-Ebene
   nicht verdecken. Die Mobil-CTA-Leiste rutscht um die Hoehe der
   Consent-Leiste nach oben — ueber bottom, nicht ueber transform,
   damit ihre eigene Einblend-Animation unangetastet bleibt. Anruf,
   WhatsApp und Formular bleiben also auch ohne Entscheidung erreichbar.
   Die beiden runden Knoepfe am Desktop treten fuer diese eine
   Interaktion zurueck; nach der Entscheidung sind sie wieder da. */
body.rh-cs-aktiv .rh-mobile-bar { bottom: var(--rh-cs-h, 0px); }
body.rh-cs-aktiv .rh-fab,
body.rh-cs-aktiv .rh-cs-chat { display: none; }

.rh-cs-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}
.rh-cs-text { flex: 1 1 380px; min-width: 0; }
.rh-cs-text strong {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  margin-bottom: 5px;
}
.rh-cs-text a {
  color: var(--rh-blue-bright, #4ec5ff);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Beide Knoepfe gleich gross und gleich prominent. Ungleiche
   Gestaltung ist der Punkt, an dem Aufsichtsbehoerden ansetzen. */
.rh-cs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto;
}
.rh-cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 176px;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: var(--rh-radius-sm, 7px);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s var(--rh-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.rh-cs-btn-necessary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}
.rh-cs-btn-necessary:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.72);
}
.rh-cs-btn-all {
  background: var(--rh-blue, #35a8e0);
  color: #fff;
}
body[data-area="elektro"] .rh-cs-btn-all { color: var(--rh-black, #1a1a1a); }
.rh-cs-btn-all:hover {
  background: var(--rh-blue-dark, #1f7cad);
  transform: translateY(-2px);
}
body[data-area="elektro"] .rh-cs-btn-all:hover { color: var(--rh-black, #1a1a1a); }

.rh-cs-link {
  background: none;
  border: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.68);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  flex: 0 0 auto;
}
.rh-cs-link:hover { color: #fff; }

/* ============================================================
   2. DETAILS: EINZELNE DIENSTE
   ============================================================ */
.rh-cs-details {
  display: none;
  flex: 1 1 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: 4px;
  padding-top: 16px;
}
.rh-cs-bar.is-open .rh-cs-details { display: block; }

.rh-cs-service {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.rh-cs-service:last-of-type { border-bottom: 0; }
.rh-cs-service-body { flex: 1 1 auto; min-width: 0; }
.rh-cs-service-body b {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  margin-bottom: 3px;
}
.rh-cs-service-body span {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

/* Schalter. Das <input> bleibt im Baum und bedienbar, es wird
   nur visuell durch die Spur ersetzt — sonst verliert der
   Schalter die Tastaturbedienung. */
.rh-cs-switch {
  position: relative;
  flex: 0 0 auto;
  width: 50px;
  height: 28px;
  margin-top: 2px;
}
.rh-cs-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.rh-cs-track {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.22);
  transition: background 0.2s;
  pointer-events: none;
}
.rh-cs-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s var(--rh-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.rh-cs-switch input:checked + .rh-cs-track { background: var(--rh-blue, #35a8e0); }
.rh-cs-switch input:checked + .rh-cs-track::after { transform: translateX(22px); }
.rh-cs-switch input:focus-visible + .rh-cs-track {
  outline: 2px solid var(--rh-blue-bright, #4ec5ff);
  outline-offset: 2px;
}
.rh-cs-switch input:disabled { cursor: default; }
.rh-cs-switch input:disabled + .rh-cs-track { background: rgba(255, 255, 255, 0.32); }

.rh-cs-details-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* ============================================================
   3. KLICK-ZUM-LADEN: VIDEO
   Standbild plus Abspielknopf. Der Vimeo-Iframe entsteht erst
   beim Klick, mit dnt=1. Ohne Klick verlaesst kein Request die
   Domain.
   ============================================================ */
/* Bewusst KEIN height: 100%. Auf /interview/ nutzt der Rahmen
   .video-frame den padding-top-Trick; dessen Inhaltshoehe ist 0, ein
   Kind mit height: 100% waere dort 0 Pixel hoch und der Abspielknopf
   nicht anklickbar. aspect-ratio traegt sich selbst und passt in alle
   uebrigen Rahmen (aspect-video bzw. aspect-ratio am Elternteil). */
.rh-cs-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
/* Rahmen mit padding-top-Trick: dort absolut fuellen. */
.video-frame > .rh-cs-video {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}
.rh-cs-video img,
.rh-cs-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.rh-cs-video img { object-fit: cover; }
.rh-cs-video-btn {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 24px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.58) 100%);
  border: 0;
  cursor: pointer;
  color: #fff;
  font-family: 'Hanken Grotesk', sans-serif;
  text-align: center;
  transition: background 0.22s;
}
.rh-cs-video-btn:hover { background: rgba(0, 0, 0, 0.62); }
.rh-cs-video-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--rh-blue, #35a8e0);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.42);
  transition: transform 0.2s var(--rh-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.rh-cs-video-btn:hover .rh-cs-video-play { transform: scale(1.08); }
.rh-cs-video-play svg { width: 26px; height: 26px; margin-left: 3px; color: #fff; }
body[data-area="elektro"] .rh-cs-video-play svg { color: var(--rh-black, #1a1a1a); }
.rh-cs-video-hint {
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.rh-cs-video-hint b { font-weight: 700; }

/* ============================================================
   4. KLICK-ZUM-LADEN: CHAT (Desktop)
   Eigener Knopf im Seitenstil. Zoho SalesIQ laedt erst beim
   Klick. Wer den Chat aktiv anfordert, willigt damit in die
   Funktion ein — dafuer braucht es kein Banner.
   Auf Mobil kein Knopf: die CTA-Leiste hat Anruf, WhatsApp und
   Formular schon.
   ============================================================ */
.rh-cs-chat {
  position: fixed;
  right: 22px;
  bottom: 142px;
  z-index: 55;
  display: none;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 20px 0 17px;
  border-radius: 100px;
  border: 0;
  background: var(--rh-black, #1a1a1a);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.34);
  transition: transform 0.2s var(--rh-ease, cubic-bezier(0.16, 1, 0.3, 1)), box-shadow 0.2s;
}
.rh-cs-chat:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42); }
.rh-cs-chat svg { width: 22px; height: 22px; color: var(--rh-blue-bright, #4ec5ff); }
.rh-cs-chat.is-loading { opacity: 0.6; pointer-events: none; }
@media (min-width: 1024px) {
  .rh-cs-chat { display: inline-flex; }
}

/* ============================================================
   5. KLICK-ZUM-LADEN: TERMINBUCHUNG
   ============================================================ */
.rh-cs-embed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 320px;
  padding: 34px 24px;
  border: 1px solid rgba(26, 26, 26, 0.14);
  border-radius: var(--rh-radius, 10px);
  background: #fafafa;
  text-align: center;
}
.rh-cs-embed p {
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--rh-gray-text, #6b6b6a);
  margin: 0;
}

/* ============================================================
   6. STATISCHES BEWERTUNGSSIEGEL
   Ersetzt die ProvenExpert-Widgetbar. Kein Drittanbieter-
   Request, die Bewertungen bleiben sichtbar.
   ============================================================ */
.rh-cs-seal {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.82);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.rh-cs-seal:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.32); }
.rh-cs-seal-score {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: #fff;
  white-space: nowrap;
}
.rh-cs-seal-stars { color: var(--rh-blue-bright, #4ec5ff); letter-spacing: 1px; font-size: 15px; }
.rh-cs-seal-meta { line-height: 1.4; }
.rh-cs-seal-meta span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.58); }

@media (max-width: 767px) {
  .rh-cs-btn { min-width: 0; flex: 1 1 140px; }
  .rh-cs-inner { gap: 12px 16px; }
  .rh-cs-seal { flex-wrap: wrap; border-radius: var(--rh-radius, 10px); }
}