/* Bauplätze-Teaser (Startseite) — nur innerhalb .bp-teaser aktiv */
.bp-teaser{
  --bp-text:#0f172a;
  --bp-muted:#6b7280;
  --bp-border:rgba(15,23,42,.10);
  --bp-shadow:0 18px 45px rgba(15,23,42,.10);
  --bp-shadow2:0 10px 24px rgba(15,23,42,.10);
  --bp-accent:#0f766e;
  --bp-accent2:#f28a00;

  width:100%;
  border:1px solid var(--bp-border);
  border-radius:24px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  box-shadow: var(--bp-shadow);
  overflow:hidden;
  position:relative;
  isolation:isolate;
}

.bp-teaser::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 400px at 15% 10%, rgba(15,118,110,.14), transparent 55%),
    radial-gradient(900px 400px at 85% 0%, rgba(242,138,0,.12), transparent 55%);
  z-index:-1;
}

.bp-teaser__wrap{
  padding:22px;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:18px;
  align-items:center;
}

@media (max-width: 860px){
  .bp-teaser__wrap{grid-template-columns:1fr;}
}

.bp-teaser__preview{
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--bp-border);
  background:#fff;
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
  display:block;
  text-decoration:none;
}

.bp-teaser__preview svg{
  display:block;
  width:100%;
  height:auto;
}

.bp-teaser__copy{
  padding:6px 2px;
}

.bp-teaser__kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(242,138,0,.10);
  border:1px solid rgba(242,138,0,.28);
  color:#9a4d00;
  font-weight:900;
  font-size:13px;
  margin: 0 0 10px;
}

.bp-teaser__kicker svg{width:16px;height:16px}

.bp-teaser__h1{
  font-size: clamp(24px, 2.3vw, 32px);
  letter-spacing:-0.02em;
  margin:0 0 10px;
  color:var(--bp-text);
}

.bp-teaser__body{
  color:var(--bp-muted);
  line-height:1.55;
  margin:0 0 14px;
}

.bp-teaser__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.bp-teaser__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  font-weight:900;
  text-decoration:none;
  border:1px solid rgba(15,23,42,.12);
  box-shadow: var(--bp-shadow2);
  transition: transform .15s ease;
}

.bp-teaser__btn:hover{transform: translateY(-1px);}

.bp-teaser__btn--primary{
  background: linear-gradient(180deg, rgba(15,118,110,1), rgba(12,95,89,1));
  border-color: rgba(15,118,110,.35);
  color:#fff;
}

.bp-teaser__btn svg{width:18px;height:18px}

.bp-teaser__hint{
  margin-top:10px;
  font-size:13px;
  color:var(--bp-muted);
}

@media (prefers-reduced-motion:no-preference){
  .bp-teaser{animation: bp-pop .45s ease both}
  @keyframes bp-pop{from{transform: translateY(10px); opacity:0}to{transform: translateY(0); opacity:1}}
}
/* Abstand zum vorherigen Block */
#block-mittelstrimmig-base-bauplatze{
  margin-top: 28px; /* gern 24–40px je nach Geschmack */
}
/* Button: Text/Icons weiß + bessere Lesbarkeit */
#block-mittelstrimmig-base-bauplatze .bp-btn,
#block-mittelstrimmig-base-bauplatze .bp-btn:visited{
  color:#fff !important;
}

#block-mittelstrimmig-base-bauplatze .bp-btn i,
#block-mittelstrimmig-base-bauplatze .bp-btn svg{
  color:#fff !important;
  fill:#fff !important;
}

#block-mittelstrimmig-base-bauplatze .bp-btn{
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
/* =========================================================
   FIX: Abstand + Primärbutton-Farben
   ========================================================= */

/* Abstand: Bauplätze-Teaser direkt nach dem Abfallkalender-Block */
#block-mittelstrimmig-base-abfallkalender + .bp-teaser{
  margin-top: 28px;
}

/* Fallback, falls der Block mal woanders steht (optional):
.bp-teaser{ margin-top: 28px; }
*/

/* Primärbutton: Text/Icons immer weiß (auch visited) */
body .bp-teaser .bp-teaser__actions a.bp-teaser__btn--primary,
body .bp-teaser .bp-teaser__actions a.bp-teaser__btn--primary:visited,
body .bp-teaser .bp-teaser__actions a.bp-teaser__btn--primary:hover,
body .bp-teaser .bp-teaser__actions a.bp-teaser__btn--primary:focus{
  color:#fff !important;
  -webkit-text-fill-color:#fff; /* Safari/Chromium edge-cases */
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* SVG nutzt currentColor -> bleibt dadurch ebenfalls weiß */
body .bp-teaser .bp-teaser__actions a.bp-teaser__btn--primary svg{
  color: currentColor !important;
}