/* =============================================================================
   MB Trust-Widget — schwebendes Bewertungs-Badge (rechte Ecke), aufklappbares
   Panel mit echten Geschaeftskunden-Stimmen. Stoertebekker-Muster, MB-Brand.

   - Badge unten rechts (Hero ist links angeordnet); blendet beim Runter-Scrollen
     aus (relaunch.js-fremd, eigene Scroll-Logik in trust-widget.js), kommt beim
     Hoch-Scrollen zurueck. Sitzt gestapelt UEBER dem to-top-Button (rechte Ecke).
   - Gruenes Pruef-Siegel (Rosette + Haekchen) bewusst in EIGENER Farbe (#12a454)
     — wirkt wie ein unabhaengiges Verifizierungs-Siegel, nicht wie das MB-Logo.
   - Consent-Gate: Cookie-Banner sitzt bottom-left, auf Mobil aber als breite Box
     ueber die volle untere Kante. Das Widget bleibt versteckt, bis der
     Consent-Cookie (cc_cookie) gesetzt ist — trust-widget.js schaltet dann
     .is-ready frei. Ohne diese Klasse unsichtbar.
   ========================================================================== */

.mb-trust{
  position:fixed;
  /* Rechte Kante (Hero ist links angeordnet). Gestapelt UEBER dem to-top-Button
     (46px hoch @ bottom 18px), damit beide die rechte Ecke teilen ohne Overlap. */
  right:max(18px, env(safe-area-inset-right, 0px));
  bottom:calc(76px + env(safe-area-inset-bottom, 0px));
  z-index:60;
  /* Default: ausgeblendet nach rechts, bis der Consent-Gate .is-ready setzt. */
  opacity:0;
  pointer-events:none;
  transform:translateX(calc(100% + 24px));
  transition:transform .38s cubic-bezier(.22,1,.36,1), opacity .3s ease-out;
}
/* Freigeschaltet (Consent-Cookie vorhanden): eingeblendet. */
.mb-trust.is-ready{ opacity:1; pointer-events:auto; transform:none; }
/* Scroll-nach-unten: wieder ausblenden (nur wenn schon freigeschaltet). */
.mb-trust.is-ready.is-hidden{
  transform:translateX(calc(100% + 24px));
  opacity:0;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .mb-trust{ transition:opacity .2s linear; }
  .mb-trust.is-ready, .mb-trust.is-ready.is-hidden{ transform:none; }
  .mb-trust.is-ready.is-hidden{ opacity:0; visibility:hidden; }
}

/* ---- Eingeklapptes Badge ---------------------------------------------- */
.mbt-badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  width:78px;
  padding:14px 10px 13px;
  background:#fff;
  border:1px solid #e7e9ee;
  border-radius:30px;
  box-shadow:0 6px 22px rgba(22,32,46,.14), 0 1px 3px rgba(22,32,46,.08);
  cursor:pointer;
  font:inherit;
  color:#16202e;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:box-shadow .2s ease, transform .15s ease;
}
.mbt-badge:hover{ box-shadow:0 10px 28px rgba(22,32,46,.18), 0 1px 3px rgba(22,32,46,.08); }
.mbt-badge:active{ transform:scale(.97); }
.mbt-badge:focus-visible{ outline:3px solid #C24E00; outline-offset:3px; }
.mbt-badge .seal{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; }
.mbt-badge .seal svg{ width:100%; height:100%; display:block; }
.mbt-badge .rate{ font-size:15px; font-weight:800; line-height:1; letter-spacing:-.01em; }
.mbt-badge .rate small{ font-size:10px; font-weight:600; color:#6b7480; }
.mbt-badge .mini-stars{ font-size:9px; letter-spacing:.5px; color:#ff6800; line-height:1; }

/* Offen: Badge ausblenden, Panel zeigen. */
.mb-trust.open .mbt-badge{ opacity:0; pointer-events:none; }

/* ---- Aufgeklapptes Panel ---------------------------------------------- */
.mbt-panel{
  position:absolute;
  right:0;
  bottom:0;
  width:330px;
  max-width:calc(100vw - 32px);
  background:#fff;
  border:1px solid #e7e9ee;
  border-radius:18px;
  box-shadow:0 18px 50px rgba(22,32,46,.24), 0 2px 8px rgba(22,32,46,.10);
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px) scale(.97);
  transform-origin:right bottom;
  transition:opacity .22s ease-out, transform .22s cubic-bezier(.22,1,.36,1), visibility 0s .22s;
}
.mb-trust.open .mbt-panel{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .22s ease-out, transform .22s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion:reduce){
  .mbt-panel{ transform:none; transition:opacity .2s linear, visibility 0s .2s; }
  .mb-trust.open .mbt-panel{ transition:opacity .2s linear; }
}

/* Panel-Kopf: Siegel + Gesamtnote + Sterne + Schliessen */
.mbt-head{
  display:flex;
  align-items:center;
  gap:11px;
  padding:15px 15px 14px;
  background:linear-gradient(180deg,#fbfcfd,#fff);
  border-bottom:1px solid #eef0f4;
}
.mbt-head .seal{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; flex:none; }
.mbt-head .seal svg{ width:100%; height:100%; display:block; }
.mbt-head .h-txt{ flex:1 1 auto; min-width:0; }
.mbt-head .h-top{ display:flex; align-items:baseline; gap:8px; }
.mbt-head .h-rate{ font-size:21px; font-weight:800; line-height:1; letter-spacing:-.02em; color:#16202e; }
.mbt-head .h-stars{ font-size:13px; letter-spacing:1px; color:#ff6800; line-height:1; }
/* Zwei bewusste Zeilen (Anzahl + Qualifier) — kein wort-zerreissender Wrap. */
.mbt-head .h-sub{ margin-top:3px; font-size:11.5px; color:#6b7480; line-height:1.4; }
.mbt-head .h-sub span{ display:block; }
.mbt-close{
  position:relative;
  flex:none;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  border:1px solid #e2e5ea;
  border-radius:50%;
  color:#6b7480;
  cursor:pointer;
  touch-action:manipulation;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
/* Trefferflaeche auf >=44px erweitern (Optik bleibt 34px). */
.mbt-close::after{ content:""; position:absolute; inset:-6px; }
.mbt-close:hover{ background:#f4f6f8; color:#16202e; }
.mbt-close:active{ background:#e9edf1; }
.mbt-close:focus-visible{ outline:3px solid #C24E00; outline-offset:2px; }
.mbt-close svg{ width:16px; height:16px; display:block; }

/* Stimmen-Spur (nur eine Folie sichtbar; Wischen wechselt) */
.mbt-track{ position:relative; }
.mbt-slide{
  display:none;
  padding:16px;
  color:#16202e;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}
.mbt-slide.is-active{ display:block; }
.mbt-slide.swap{ animation:mbtSwap .22s ease-out; }
@keyframes mbtSwap{
  from{ opacity:0; transform:translateX(var(--dir,10px)); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){ .mbt-slide.swap{ animation:none; } }

.mbt-quote-top{ display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.mbt-avatar{
  width:44px; height:44px;
  border-radius:50%;
  object-fit:cover;
  flex:none;
  background:#eef0f4;
  border:1px solid #e7e9ee;
}
.mbt-id{ display:flex; flex-direction:column; min-width:0; }
.mbt-id b{ font-size:14px; font-weight:700; color:#16202e; line-height:1.2; }
.mbt-id small{ font-size:11.5px; color:#6b7480; line-height:1.3; margin-top:1px; }
.mbt-vstars{ font-size:14px; letter-spacing:1.5px; line-height:1; margin-bottom:8px; }
.mbt-vstars .on{ color:#ff6800; }
.mbt-vstars .off{ color:#d8dce2; }
.mbt-slide blockquote{
  margin:0;
  font-size:14.5px;
  line-height:1.5;
  color:#28323f;
}

/* Fuss: Dots + "Alle Stimmen" */
.mbt-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 16px 14px;
  border-top:1px solid #eef0f4;
}
.mbt-dots{ display:flex; align-items:center; gap:6px; }
.mbt-dots button{
  position:relative;
  width:8px; height:8px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#d8dce2;
  cursor:pointer;
  touch-action:manipulation;
  transition:background .18s ease, width .18s ease;
}
/* Vertikale Trefferflaeche fuer den Daumen erweitern (Optik bleibt 8px). */
.mbt-dots button::after{ content:""; position:absolute; inset:-12px -3px; }
.mbt-dots button[aria-current="true"]{ width:20px; border-radius:5px; background:#ff6800; }
.mbt-dots button:focus-visible{ outline:2px solid #C24E00; outline-offset:2px; }
.mbt-all{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12.5px;
  font-weight:700;
  color:#C24E00;
  text-decoration:none;
  white-space:nowrap;
}
.mbt-all:hover{ text-decoration:underline; }
.mbt-all:focus-visible{ outline:2px solid #C24E00; outline-offset:2px; border-radius:3px; }
.mbt-all svg{ width:14px; height:14px; }

/* ---- Mobile ------------------------------------------------------------ */
@media (max-width:600px){
  /* to-top auf Mobil bei bottom 18px -> Badge knapp darueber stapeln. */
  .mb-trust{ right:max(12px, env(safe-area-inset-right, 0px)); bottom:calc(72px + env(safe-area-inset-bottom, 0px)); }
  .mbt-badge{ width:76px; }
}