/* financeads-ads.css
 *
 * Echte financeads-Banner-Werbeplaetze (Phase 3), gerendert von
 * financeads\AdSlotRenderer und geladen von SidebarLayout/WebsiteLayout.
 * Bewusst zurueckhaltend gerahmt — das Banner selbst traegt das Design.
 *
 * Farben/Radien aus den globalen Custom Properties → Dark-Mode-Paritaet.
 * Keine !important-Regeln.
 */

.ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

/* "Anzeige" bewusst klein + dezent (Pflicht-Kennzeichnung, kein Blickfang). */
.ad-slot__label {
  align-self: flex-start;
  font-size: 0.625rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ad-slot__banner {
  display: block;
  line-height: 0;
  max-width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Banner skaliert auf schmalen Spalten herunter, Seitenverhaeltnis bleibt. */
.ad-slot__banner img {
  display: block;
  max-width: 100%;
  height: auto;
}

.ad-slot--sidebar {
  margin: 0.75rem 0.5rem;
}

.ad-slot--inline {
  margin: 1.5rem 0;
  align-items: center;
}

.ad-slot--inline .ad-slot__label {
  align-self: center;
}

/* Text-Link-Werbemittel ({{ad|text}}): dezent gerahmter, klickbarer Hinweis. */
.ad-slot--text {
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
  text-align: center;
}

.ad-slot__text {
  font-weight: 600;
  color: var(--link-color);
  text-decoration: none;
}

.ad-slot__text:hover {
  text-decoration: underline;
}

/* CMS-Editor-Vorschau-Platzhalter fuer {{ad}} (nie live ausgeliefert). */
.ad-slot--placeholder {
  width: 100%;
  padding: 1rem;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
}

.ad-slot__placeholder-body {
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-align: center;
}