/* Superbanner „Ausstattung“ auf der Startseite (Eigenwerbung für /ausstattung, Amazon-Partnerlinks).
   Über die volle Inhaltsbreite wie das Quiz-Billboard; auf schmalen Bildschirmen ein flacher Banner.
   Gestaltung wie das Quiz-Billboard in quiz.css – gleiche Farben, gleiche Lichtstrahlen. */
.ad-billboard {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 36px 0 8px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 56px);
  border-radius: var(--radius); color: var(--on-deep);
  background:
    radial-gradient(50% 80% at 88% 18%, rgba(98, 211, 197, .28), transparent 70%),
    radial-gradient(40% 70% at 0% 100%, rgba(55, 86, 155, .32), transparent 70%),
    linear-gradient(135deg, var(--deep-2) 0%, var(--deep-1) 100%);
  box-shadow: var(--shadow);
}
.ad-billboard::before { /* Lichtstrahlen wie im Kopfbereich */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(105deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 64px);
}
/* Kennzeichnung: muss auf den ersten Blick als Werbung erkennbar sein */
.ad-kennung {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font: 600 .78rem var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--glow);
}
.ad-kennung b {
  padding: 2px 8px; border: 1px solid currentColor; border-radius: 4px;
  font-weight: 600; letter-spacing: .1em;
}
.ad-billboard h2 { margin: 0; font: 600 clamp(2rem, 4.2vw, 3rem)/1.06 var(--f-display); letter-spacing: -.02em; }
.ad-billboard p.ad-lede { margin: 12px 0 0; max-width: 48ch; color: var(--on-deep-2); font-size: 1.05rem; }
.ad-billboard p.ad-klein { margin: 8px 0 0; font-size: .8rem; color: var(--on-deep-2); opacity: .85; }
.ad-knopf {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px;
  border-radius: 999px; background: var(--glow); color: #04282B;
  font: 600 1rem var(--f-body); text-decoration: none; transition: box-shadow .15s;
}
/* Die ganze Fläche ist klickbar – wie beim Quiz-Billboard darf dazwischen nichts positioniert sein. */
.ad-knopf::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.ad-billboard:hover .ad-knopf { box-shadow: 0 0 0 4px rgba(98, 211, 197, .3); }
.ad-knopf:focus-visible { outline: none; }
.ad-knopf:focus-visible::after { outline: 3px solid var(--glow); outline-offset: -3px; }
.ad-knopf svg { width: 16px; height: 16px; }

/* Symbolgruppe rechts: dieselbe Strichzeichnung wie in den Ausstattungs-Kästen, kein Produktfoto */
.ad-symbole { pointer-events: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ad-symbole svg {
  width: clamp(54px, 7vw, 78px); height: auto; color: var(--glow); opacity: .9;
}

@media (max-width: 860px) {
  .ad-billboard {
    grid-template-columns: auto 1fr auto; grid-template-areas: "sym titel pfeil" "sym kurz pfeil";
    column-gap: 14px; row-gap: 0; margin: 28px 0 4px; padding: 12px 16px;
  }
  .ad-text { display: contents; }
  .ad-symbole { grid-area: sym; grid-template-columns: 1fr; gap: 0; }
  .ad-symbole svg:not(:first-child) { display: none; }
  .ad-symbole svg { width: 40px; }
  .ad-billboard h2 { grid-area: titel; align-self: end; font-size: 1.3rem; }
  .ad-kennung { grid-area: kurz; align-self: start; margin: 2px 0 0; font-size: .7rem; }
  .ad-billboard p.ad-lede, .ad-billboard p.ad-klein { display: none; }
  .ad-knopf { grid-area: pfeil; margin: 0; padding: 0; width: 40px; height: 40px; justify-content: center; font-size: 0; }
}

/* ---------- Sitebar (Eigenwerbung, 300 × 600) ---------- */
/* Steht rechts neben dem Inhalt und bleibt beim Scrollen stehen, solange ihre Spalte reicht.
   Erst ab 1100 px Fensterbreite sichtbar: darunter würde der Inhalt zu schmal. */
.ad-spalte, .ad-sitebar { display: none; }

@media (min-width: 1100px) {
  /* Die Spalte wird über die volle Höhe gestreckt – nur so kann die Box lange kleben bleiben. */
  .ad-spalte { display: block; align-self: stretch; height: 100%; }
  .ad-sitebar {
    position: sticky; top: calc(var(--top-h, 60px) + 20px);
    display: flex; flex-direction: column; align-items: flex-start;
    width: 300px; height: 600px; overflow: hidden; isolation: isolate;
    margin-top: 28px; padding: 24px 22px; border-radius: var(--radius); color: var(--on-deep);
    background:
      radial-gradient(60% 40% at 90% 8%, rgba(98, 211, 197, .28), transparent 70%),
      radial-gradient(50% 40% at 0% 100%, rgba(55, 86, 155, .32), transparent 70%),
      linear-gradient(160deg, var(--deep-2) 0%, var(--deep-1) 100%);
    box-shadow: var(--shadow);
  }
  .ad-sitebar::before { /* Lichtstrahlen wie im Kopfbereich */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: repeating-linear-gradient(105deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 64px);
  }
  .ad-sitebar h2 { margin: 0; font: 600 1.6rem/1.15 var(--f-display); letter-spacing: -.02em; }
  .ad-sitebar p.ad-lede { margin: 10px 0 0; font-size: .92rem; color: var(--on-deep-2); }
  .ad-sitebar .ad-kennung { margin-bottom: 14px; font-size: .68rem; }
  .ad-sitebar .ad-kennung b { padding: 2px 6px; }
  .ad-liste { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; width: 100%; }
  .ad-liste li {
    display: flex; align-items: center; gap: 12px;
    font: 500 .95rem var(--f-body); color: var(--on-deep);
  }
  .ad-liste svg { width: 34px; height: 34px; flex: none; color: var(--glow); }
  .ad-sitebar .ad-knopf { margin-top: auto; }
  .ad-sitebar p.ad-klein { margin: 14px 0 0; font-size: .72rem; line-height: 1.4; }
}

/* Übersichtsseiten (/arten/, /pflanzen/, /ratgeber/): Inhalt links, Sitebar rechts.
   Ohne die Media-Query bleibt alles einspaltig – die Sitebar ist dann ausgeblendet. */
@media (min-width: 1100px) {
  .wrap.mit-sitebar { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: stretch; }
  .wrap.mit-sitebar > .ad-spalte > .ad-sitebar,
  .wrap.mit-sitebar > .ad-sitebar { margin-top: 0; }
}