/* === Standard: Desktop / Tablet (>= 768px) === */

.promo-frame {
  position: fixed;
  top: 50%;                          /* vertikal zentriert */
  left: 0;
  transform: translate(-120%, -50%); /* Start: außerhalb links */
  z-index: 2147483647;               /* extrem hoch, über allem */
  background: #ffffff;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  padding: 10px;
  border-radius: 4px;
  transition: transform 0.5s ease;
  display: flex;
  align-items: center;
  overflow: visible;                 /* wichtig für den Close-Kreis */
}

/* Sichtbarer Zustand */
.promo-frame.promo-frame--visible {
  transform: translate(0, -50%);
}

/* Link im Banner */
.promo-frame a {
  display: block;
  position: relative;
  z-index: 0;
}

/* Desktop-/Tablet-Bild (Standard) */
.promo-img-desktop {
  display: block;
  max-width: 200px;   /* nach Bedarf anpassen */
  height: auto;
}

/* Mobile-Bild wird auf Desktop ausgeblendet */
.promo-img-mobile {
  display: none;
}

/* Close-Button: runder cremeweißer Kreis on top (Desktop/Tablet) */
.promo-close {
  position: absolute;
  top: -10px;             /* etwas außerhalb des Rahmens */
  right: -10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #d0c8b8;    /* dezente Kontur */
  background: #f5f0e6;          /* Cremeweiß */
  color: #333333;               /* dunkles X für Kontrast */
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;                   /* über dem Bild */
  box-shadow: 0 0 4px rgba(0,0,0,0.25);
}

.promo-close:focus {
  outline: 1px solid #333;
}


/* === Mobile (< 768px): Bar am unteren Rand === */

@media (max-width: 767px) {
  .promo-frame {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);      /* Start: unterhalb des Viewports */

    /*border-radius: 8px 8px 0 0;*/       /* oben abgerundet */
    /*padding: 4px 0px;*/

    padding: 0;                     /* gar kein Innenabstand */
    border-radius: 0;               /* keine abgerundeten Ecken */
    border-left: 0;
    border-right: 0;

    display: flex;
    justify-content: center;
  }

  .promo-frame.promo-frame--visible {
    transform: translateY(0);         /* hochfahren */
  }

  /* Desktop-Bild auf Mobile ausblenden */
  .promo-img-desktop {
    display: none;
  }

  /* Mobile-Bild auf Mobile anzeigen */
  .promo-img-mobile {
    display: block;
    width: 100%;                    /* volle Breite */
    max-width: none;                /* keine künstliche Begrenzung */
    max-height: 100px;               /* Höhe begrenzen, falls gewünscht */
    height: auto;
    object-fit: contain;
  }

  /* Link soll ebenfalls volle Breite einnehmen */
  .promo-frame a {
    width: 100%;
  }

  /* Close-Button in die Bar setzen */
  .promo-close {
    top: 4px;
    right: 8px;
  }
}