/*
 * Besenschänke Haselbusch – Werbe-Störer
 *
 * Geometrie Flasche (verifiziert):
 *   Pivot = Mündung (36px, 8px) → liegt bei (80,40) in .bhs-left
 *   Start 115° → Einschenk-Position 175°
 */

/* ── Äußere Hülle mit weißem Hintergrund + Schatten ── */
.bhs-stoerer {
  position: fixed;
  bottom: 20px;
  left: 50%;
  width: min(94vw, 680px);
  z-index: 999999;
  font-family: 'Georgia', 'Palatino Linotype', serif;
  transform: translate(-50%, 130%) scale(0.95);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.3,1.4,0.45,1), opacity 0.6s ease;
  pointer-events: none;

  /* Weißer Hintergrund mit sanftem Rand */
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(90,16,39,0.15);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.18),
    0 2px 8px rgba(0,0,0,0.10),
    0 0 0 1px rgba(0,0,0,0.04);

  /* Weißer Fade-Rand (Vignette nach innen) */
  padding: 16px 16px 20px 16px;
}
.bhs-stoerer.bhs-visible {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
  pointer-events: auto;
  animation: bhsFloat 4s ease-in-out 1.2s infinite;
}
@keyframes bhsFloat {
  0%,100% { transform: translate(-50%,0) scale(1); }
  50%     { transform: translate(-50%,-5px) scale(1); }
}

/* ── ANZEIGE-Balken ── */
.bhs-adbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #8c1c3a 0%, #5a1027 100%);
  border-radius: 10px;
  padding: 9px 12px 9px 18px;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(90,16,39,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
  position: relative;
  overflow: hidden;
}
.bhs-adbar::before {
  content: "";
  position: absolute;
  top: -60%; left: -8%; width: 35%; height: 220%;
  background: rgba(255,255,255,0.08);
  transform: rotate(20deg);
  pointer-events: none;
}
.bhs-adlabel {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}
.bhs-adlabel:hover { color: #ffe9c4; }

/* ── Schließen-Button: schlicht, kein Kreis, oben rechts ── */
.bhs-close {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 10;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 6px;
  border: none;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.bhs-close:hover {
  background: rgba(255,255,255,0.28);
  color: #fff;
}

/* ── Haupt-Banner ── */
.bhs-card {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}

/* ── Linke Seite: Glasplakette + Flasche ── */
.bhs-left {
  flex: 0 0 auto;
  position: relative;
  width: 150px;
  height: 150px;
}
.bhs-plate {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fdf6ea 0%, #f3e2c4 70%, #ecd5ad 100%);
  border: 3px solid #d9a84e;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.18),
    inset 0 2px 6px rgba(255,255,255,0.7);
  overflow: hidden;
}
.bhs-glass {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -45%);
  width: 68px;
  height: 90px;
}

/* Flasche – geometrisch verifiziert */
.bhs-bottle-img {
  position: absolute;
  left: 41px;
  top:  30px;
  width: 68px;
  height: 246px;
  transform-origin: 34px 8px;
  transform: rotate(115deg);
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(1px 4px 8px rgba(0,0,0,0.35));
}

/* SVG-Klassen */
.bhs-stream {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 0%;
  transform: scaleY(0);
}
.bhs-wine-fill    { transform: scaleY(0); transform-origin: bottom; }
.bhs-wine-surface { opacity: 0; }
.bhs-ripple       { opacity: 0; transform-origin: center; }
.bhs-sparkle      { opacity: 0; transform-origin: center; }

/* Animationen */
.bhs-stoerer.bhs-visible .bhs-bottle-img  { animation: bhsBottle 5.2s cubic-bezier(0.4,0,0.3,1) 0.5s forwards; }
.bhs-stoerer.bhs-visible .bhs-stream       { animation: bhsStream  1.9s ease-in-out 1.4s forwards; }
.bhs-stoerer.bhs-visible .bhs-wine-fill    { animation: bhsFill    1.8s cubic-bezier(0.2,0.85,0.4,1) 1.5s forwards; }
.bhs-stoerer.bhs-visible .bhs-wine-surface { animation: bhsSurface 1.8s ease-out 1.5s forwards; }
.bhs-stoerer.bhs-visible .bhs-ripple       { animation: bhsRipple  1.0s ease-out 3.2s forwards; }
.bhs-stoerer.bhs-visible .bhs-sparkle      { animation: bhsSparkle 1.8s ease-out 3.35s forwards; }

@keyframes bhsBottle {
  0%   { opacity:0; transform:rotate(115deg); }
  10%  { opacity:1; transform:rotate(115deg); }
  36%  { transform:rotate(175deg); }
  70%  { transform:rotate(175deg); opacity:1; }
  88%  { transform:rotate(115deg); opacity:0.5; }
  100% { transform:rotate(115deg); opacity:0; }
}
@keyframes bhsStream {
  0%   { opacity:0; transform:scaleY(0); }
  8%   { opacity:1; }
  82%  { opacity:1; transform:scaleY(1); }
  100% { opacity:0; transform:scaleY(1); }
}
@keyframes bhsFill    { 0% { transform:scaleY(0); } 100% { transform:scaleY(1); } }
@keyframes bhsSurface { 0% { opacity:0; } 8% { opacity:1; } 100% { opacity:1; } }
@keyframes bhsRipple  { 0% { opacity:0.9; transform:scale(0.2); } 100% { opacity:0; transform:scale(3.5); } }
@keyframes bhsSparkle {
  0%   { opacity:0; transform:scale(0.3); }
  35%  { opacity:1; transform:scale(1.1); }
  75%  { opacity:1; transform:scale(0.9); }
  100% { opacity:0; transform:scale(0.5); }
}

/* ── Text-Bereich ── */
.bhs-body  { flex:1 1 auto; min-width:0; }

.bhs-title {
  color: #5a1027;
  font-size: 22px;
  font-weight: bold;
  margin: 0 0 4px;
  line-height: 1.2;
}
.bhs-sub {
  color: #8a3a55;
  font-size: 13.5px;
  line-height: 1.45;
  margin: 0 0 8px;
}
.bhs-sub--small {
  font-size: 12px;
  color: #a06070;
  font-style: italic;
  margin-top: -4px;
}
.bhs-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #b07030;
  font-size: 13px;
  font-weight: bold;
  margin: 0 0 12px;
}
.bhs-meta svg { flex:0 0 auto; width:14px; height:14px; }

.bhs-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: bold;
  color: #5a1027;
  background: linear-gradient(180deg, #ffe8a8 0%, #f0b04a 100%);
  padding: 9px 18px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(180,110,20,0.3), inset 0 1px 0 rgba(255,255,255,0.6);
  cursor: pointer;
  transition: filter 0.15s;
}
.bhs-cta:hover { filter: brightness(1.05); }

/* ── Rechte Seite: Trauben-Deko + Foto ── */
.bhs-right {
  flex: 0 0 auto;
  position: relative;
  width: 140px;
  height: 140px;
}
.bhs-grapes-deco {
  position: absolute;
  top: -25px; right: -25px;
  width: 180px;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
.bhs-photo-wrap {
  position: absolute;
  bottom: 0; left: 0;
  width: 110px; height: 110px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
  z-index: 2;
}
.bhs-photo { display:block; width:100%; height:100%; object-fit:cover; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .bhs-stoerer  { padding: 12px 12px 16px 12px; }
  .bhs-card     { gap: 10px; }
  .bhs-left     { width:110px; height:110px; }
  .bhs-glass    { width:50px; height:66px; }
  .bhs-bottle-img { width:50px; height:181px; left:30px; top:22px; }
  .bhs-title    { font-size:17px; }
  .bhs-sub      { font-size:12px; }
  .bhs-meta     { font-size:11.5px; }
  .bhs-cta      { font-size:12.5px; padding:7px 13px; }
  .bhs-right    { width:90px; height:90px; }
  .bhs-grapes-deco { width:120px; }
  .bhs-photo-wrap  { width:80px; height:80px; }
}
@media (max-width: 440px) { .bhs-right { display:none; } }