/* mobx-branding.css - Branding oben links in ModuleBox Lightbox */

/* Stelle sicher, dass mobx-top-bar als positioned container arbeitet */
.mobx-top-bar {
  position: relative; /* required so absolute children position relative to it */
}

/* Unser Branding (SVG as img) */
.mobx-top-bar .ah-branding {
  position: absolute;
  top: 18px;         /* Feineinstellung: Abstand vom oberen Rand der Top-Bar */
  left: 18px;       /* Feineinstellung: Abstand vom linken Rand */
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  pointer-events: none; /* verhindert, dass es Klicks blockiert */
  user-select: none;
  -webkit-user-select: none;
}

/* Bildgröße anpassen (Skalierend, vektorbasierend) */
.mobx-top-bar .ah-branding img {
  display: block;
  width: 160px; /* Standardbreite — passe an */
  height: auto;
  max-height: 36px; /* verhindert zu große Logos */
  vertical-align: middle;
  image-rendering: -webkit-optimize-contrast;
}

/* mobx-counter: absolute, links, aber nach unten verschoben (wird JS feinjustieren) */
.mobx-top-bar .mobx-counter {
  position: absolute;
  left: 12px;     /* bleibt links */
  z-index: 9998;  /* unter Branding */
  pointer-events: auto; /* counter bleibt interaktiv falls nötig */
  transform: translateY(0); /* default; JS kann überschreiben */
  transition: top 140ms ease, transform 140ms ease;
  background: transparent; /* falls mobx uses background */
  padding: 0 6px;
  line-height: 1;
}

/* Kleine Bildschirme: kleineres Branding */
@media (max-width: 480px) {
  .mobx-top-bar .ah-branding img { width: 164px; max-height: 28px; }
  .mobx-top-bar .ah-branding { top: 16px; left: 8px; }
  .mobx-top-bar .mobx-counter { left: 8px; }
}
/* Counter unten sichtbarer Abstand */
.mobx-caption .mobx-counter {
  font-size: 14px;
  color: #fff;
  font-family: Georgia;
  font-style: italic!important;
  opacity: 0.5 !important;
  margin-bottom: 6px;
}