/* =====================================================================
   SpielAtze - Werbeflaechen
   Bewusst ohne filter/backdrop-filter, damit beim Scrollen nichts flackert.
   ===================================================================== */

/* ---------- Seitliche Flaechen (Skyscraper) ---------- */
.ad-rail{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  z-index:40;
  display:none;                 /* erst ab genug Platz sichtbar */
  flex-direction:column;
  align-items:center;
  gap:6px;
  pointer-events:auto;
}
.ad-rail.ad-left{left:16px}
.ad-rail.ad-right{right:16px}

/* ---------- Waagerechte Banner ---------- */
.ad-bar{display:flex;flex-direction:column;align-items:center;gap:6px;margin:28px auto}
.ad-bar.ad-top{max-width:100%}

.ad-bar.ad-anchor{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:60;
  margin:0;
  padding:6px 8px 8px;
  background:rgba(9,6,20,.94);
  border-top:2px solid rgba(255,255,255,.12);
}
.ad-bar.ad-anchor .ad-close{
  position:absolute;top:-13px;right:10px;
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  border:2px solid var(--ink);background:var(--pink);color:#fff;
  font-size:17px;line-height:1;cursor:pointer;
  box-shadow:0 3px 0 var(--ink);
  transition:transform .18s var(--ease-pop)
}
.ad-bar.ad-anchor .ad-close:hover{transform:scale(1.12) rotate(90deg)}

/* Platz schaffen, damit der Fusszeilen-Inhalt nicht verdeckt wird */
body.has-anchor-ad{padding-bottom:78px}

/* ---------- Beschriftung (Pflicht: Werbung muss erkennbar sein) ---------- */
.ad-label{
  font-family:var(--font-body);
  font-size:10px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--txt-mute);
  opacity:.75;
  user-select:none;
}

/* ---------- Der eigentliche Werbeplatz ---------- */
.ad-box{
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
}
.ad-box ins.adsbygoogle{display:block}

/* ---------- Platzhalter (solange keine echte Werbung eingerichtet ist) ---------- */
.ad-box.is-placeholder{
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.05) 0 12px,
      rgba(255,255,255,.02) 12px 24px);
  border:2px dashed rgba(255,255,255,.2);
  flex-direction:column;
  gap:6px;
  text-align:center;
  padding:14px;
  color:var(--txt-mute);
}
.ad-box.is-placeholder .ph-icon{font-size:26px;opacity:.7}
.ad-box.is-placeholder .ph-name{font-family:var(--font-head);font-weight:600;font-size:13px;color:var(--txt-dim)}
.ad-box.is-placeholder .ph-size{font-size:11.5px;opacity:.8}

/* ---------- Sichtbarkeit nach Platz ---------- */
/* Seitenflaechen erst, wenn der Inhalt nicht gestoert wird.
   Inhalt = max. 1240px + 2x(160px Werbung + Abstand) */
@media (min-width:1500px){
  .ad-rail{display:flex}
}
/* Ab 1900 px liefert ads.js 300x600 statt 160x600 aus - die Box waechst
   dann automatisch mit, deshalb hier keine feste Breite. */

/* Unteres Klebe-Banner nur auf schmalen Bildschirmen */
@media (min-width:1500px){
  .ad-bar.ad-anchor{display:none}
  body.has-anchor-ad{padding-bottom:0}
}

/* ---------- Zustimmungs-Banner ---------- */
.consent{
  position:fixed;
  left:16px;right:16px;bottom:16px;
  z-index:900;
  max-width:520px;
  margin-inline:auto;
  padding:22px 24px;
  border-radius:var(--r-xl);
  border:3px solid var(--ink);
  background:linear-gradient(160deg,#1a1033,#120a24);
  box-shadow:0 14px 0 rgba(0,0,0,.42),0 30px 70px rgba(0,0,0,.6);
  transform:translateY(140%);
  transition:transform .55s var(--ease-pop);
}
.consent.show{transform:none}
.consent h3{font-size:20px;margin-bottom:8px;display:flex;align-items:center;gap:9px}
.consent p{font-size:14px;color:var(--txt-dim);line-height:1.55;margin-bottom:8px}
.consent a{color:var(--cyan);text-decoration:underline}
.consent .consent-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.consent .consent-btns .btn{flex:1;min-width:150px}

@media (max-width:520px){
  .consent{padding:18px 16px;left:10px;right:10px;bottom:10px}
  .consent h3{font-size:18px}
}