/* ================================= */
/*          Ad common styles         */
/* ================================= */
.ad {
  background-color: rgba(0, 0, 0, 0.02);
  position: relative;
  margin-top: 40px;
  margin-bottom: 40px;
  box-sizing: border-box;
}

/* Werbepartner Text */
.ad-partner-cloud {
  text-align: center;
  color: #666;
  font-family: Arial, sans-serif;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.02);
  padding: 5px 0;
}

/* Der Container mit Rahmen und Platzhalter-Logik */
.ad-cloud {
  position: relative;
  margin: 60px auto 40px auto;
  width: auto;
  border: 1px solid rgba(0, 0, 0, 0.15);
  min-height: 250px;
  transition: all 0.3s ease;
}

/* WICHTIG: Wenn AdSense die Werbung füllt, Rahmen und Höhe entfernen */
.ad-cloud.ad-loaded {
  border: none;
  min-height: 0;
}

/* Wenn keine Anzeige kommt: Gesamten Block ausblenden */
.ad-cloud.ad-empty {
  display: none;
}

/* ================================= */
/*           MEDIA Query 		 	 */
/* ================================= */

@media (max-width: 319px) { .ad-cloud { display: none; } }
@media (min-width: 320px) and (max-width: 767px) { .ad-cloud { display: block; max-width: 320px; width: 100%; } }
@media (min-width: 768px) { .ad-cloud { display: block; width: 100%; } }
@media (min-width: 768px) and (max-width: 1199px) { .ad-cloud { max-width: 468px; } }
@media (min-width: 1200px) and (max-width: 1799px) { .ad-cloud { max-width: 728px; } }
@media (min-width: 1800px) { .ad-cloud { max-width: 970px; } }

/* ================================= */
/*            SPINNER                */
/* ================================= */
.ad-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #ddd;
  border-top: 5px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: absolute;
  top: 125px;
  left: 50%;
  margin-left: -25px;
  z-index: 10;
}

.ad-loaded .ad-spinner {
  display: none;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}