/* ------------------------------------------------------------------------
   Eigenwerbung auf beehivemap.de

   Dasselbe Verhalten wie auf velutinafinder.de: drei Stufen —
   1 gross → × → 2 schmale Zeile → × → 3 weg. Gaeste haben danach 14 Tage
   Ruhe, Angemeldete 90 Tage.

   Aufbau und Verhalten stecken zusammen in js/werbung.js; anders als bei
   VelutinaFinder gibt es hier keinen Seitengenerator, der das HTML
   einbauen koennte — die 27 Seiten sind von Hand gepflegt. Das Skript
   erzeugt den Kasten deshalb selbst.

   Farben folgen dem Kopfbereich der Seite (#2c3e50).
   Angelegt 09.09.2026.
   ------------------------------------------------------------------------ */

.werbung-halter {
  position: fixed;
  top: 92px;
  right: 14px;
  z-index: 900;
  width: 320px;
  animation: werbung-einfliegen .55s cubic-bezier(.2, .8, .25, 1) both;
  animation-delay: .4s;
}

@keyframes werbung-einfliegen {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .werbung-halter { animation: none; }
}

.werbung {
  position: relative;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(44, 62, 80, .16);
  border-radius: 14px;
  box-shadow: 0 8px 26px rgba(20, 33, 48, .18);
  padding: 12px 14px 13px;
}

/* Stufe 1 zeigt den grossen Inhalt, Stufe 2 nur die eine Zeile. */
.werbung-halter[data-stufe="1"] .werbung-klein { display: none; }
.werbung-halter[data-stufe="2"] .werbung-gross { display: none; }
.werbung-halter[data-stufe="2"] { width: 280px; }
.werbung-halter[data-stufe="2"] .werbung { padding: 8px 34px 8px 12px; }

.werbung-zu {
  position: absolute;
  top: 6px;
  right: 8px;
  border: 0;
  background: none;
  color: #7a8a99;
  font-size: 1.15rem;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 999px;
  cursor: pointer;
}
.werbung-zu:hover { background: rgba(44, 62, 80, .09); color: #2c3e50; }
.werbung-halter[data-stufe="2"] .werbung-zu { top: 50%; transform: translateY(-50%); }

.werbung-titel {
  display: block;
  padding-right: 18px;
  font-size: .96rem;
  font-weight: 700;
  color: #2c3e50;
  line-height: 1.25;
}

.werbung-nutzen {
  display: block;
  font-size: .82rem;
  color: #55636f;
  line-height: 1.35;
  margin-top: 3px;
}

.werbung-bild {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 11px;
  border-radius: 10px;
  border: 1px solid rgba(44, 62, 80, .14);
  box-shadow: 0 3px 10px rgba(20, 33, 48, .13);
}

.werbung-appbilder { display: flex; gap: 8px; margin-top: 11px; }
.werbung-appbilder a { flex: 1 1 0; min-width: 0; }
.werbung-appbilder img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(44, 62, 80, .14);
}

.werbung-stores { display: flex; gap: 7px; margin-top: 10px; }
.werbung-stores a {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 600;
  color: #fff;
  background: #2c3e50;
  border-radius: 999px;
  padding: 7px 10px;
}
.werbung-stores a:hover { background: #1d2b38; }
.werbung-stores svg { width: 14px; height: 14px; fill: currentColor; }

.werbung-fuss {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
}
.werbung-preis {
  font-size: 1.02rem;
  font-weight: 700;
  color: #2c3e50;
}
.werbung-knopf {
  margin-left: auto;
  text-decoration: none;
  font-weight: 600;
  font-size: .88rem;
  color: #fff;
  background: #2c3e50;
  border-radius: 999px;
  padding: 8px 16px;
  transition: background .15s, transform .15s;
}
.werbung-knopf:hover { background: #1d2b38; transform: translateY(-1px); }

/* Stufe 2 — eine Zeile, ganz anklickbar */
.werbung-klein {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #2c3e50;
  font-weight: 600;
  font-size: .86rem;
}
.werbung-pfeil { margin-left: auto; color: #7a8a99; }
.werbung-klein:hover .werbung-pfeil { color: #2c3e50; }

/* Schmale Schirme: der grosse Kasten wuerde die Karte verdecken.
   Dort laeuft ausschliesslich die schmale Zeile, unten angeheftet. */
@media (max-width: 900px) {
  .werbung-halter {
    top: auto;
    bottom: 12px;
    right: 12px;
    left: 12px;
    width: auto;
  }
  .werbung-halter[data-stufe="2"] { width: auto; }
}


/* ------------------------------------------------------------------------
   In der Seitenleiste statt schwebend (Befund Pruefung 09.09.2026)

   Der schwebende Kasten lag auf der Startseite ueber den Bedienelementen der
   Karte: "Aktuell", "Prognose", Jahresregler und Deckkraftregler waren bei
   JEDER Breite zwischen 901 und 1680 px nicht anklickbar, solange die Anzeige
   stand. Wer die Karte benutzen wollte, musste erst ein 25 Pixel grosses
   Kreuz treffen. Auf Seiten mit Seitenleiste laeuft der Kasten deshalb
   jetzt im Textfluss ganz unten mit und verdeckt nichts mehr.
   ------------------------------------------------------------------------ */
.werbung-halter.werbung-in-leiste {
  position: static;
  width: auto;
  margin-top: 1.5rem;
  animation: none;
}

.werbung-halter.werbung-in-leiste[data-stufe="2"] { width: auto; }

@media (max-width: 900px) {
  .werbung-halter.werbung-in-leiste {
    position: static;
    inset: auto;
    margin-top: 1rem;
  }
}