/* =========================================================
   SECTION MONSTERS – Testprogramm-Abschnitt (Startseite)
   css/tester-teaser.css

   Nur fuer den Abschnitt „Wir suchen 50 Shops" auf index.html.
   Die Werbeseite selbst liegt in css/tester.css — die beiden
   teilen sich absichtlich nichts: Der Teaser lebt in der
   dunklen Landingpage-CI, die Formularseite baut auf
   shopbriefing.css auf.
   KOMPLETT UND UNGEKUERZT
   ========================================================= */

.tst-teaser {
  width: var(--container);
  margin: 0 auto 120px;
  /* Gruen statt violett: Der Audit-Banner direkt darueber ist violett
     grundiert. Zwei gleich gefaerbte Kaesten hintereinander lesen sich
     als ein Block, und der zweite wird ueberblaettert. */
  background: linear-gradient(135deg, rgba(139,214,38,.14), rgba(124,92,255,.10));
  border: 1px solid rgba(139,214,38,.30);
  border-radius: var(--radius-xl);
  padding: 56px;
}

.tst-teaser-kopf { max-width: 62ch; margin-bottom: 36px; }

.tst-teaser-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green); margin: 0 0 16px;
}

.tst-teaser h2 {
  font-size: clamp(28px, 4vw, 46px); font-weight: 900; letter-spacing: -.025em;
  line-height: 1.06; margin: 0 0 16px; text-wrap: balance;
}

.tst-teaser-kopf p {
  font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 56ch;
}

/* ── Das Bild ─────────────────────────────────────────────
   Volle Breite und ungeschnitten. Es ist hier nicht Dekoration
   neben dem Text, sondern die Aussage selbst. */
.tst-teaser-media img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg);
}

/* Platzhalter nur, solange kein Bild hinterlegt ist — gleiche Bauart wie
   beim Audit-Banner (:has statt display:none, sonst laedt ein Bild ohne
   Layout-Box nie und der Platzhalter bleibt fuer immer stehen).
   Seitenverhaeltnis passend zum Querformat des Banners. */
.tst-teaser-media:not(:has(img[src])) {
  aspect-ratio: 1671 / 950;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--faint);
  display: grid; place-items: center;
  color: var(--muted); font-size: 13px;
}
.tst-teaser-media:not(:has(img[src]))::after {
  content: "Banner „Testprogramm" — im Admin unter Startseite hinterlegen";
}

/* ── Die drei Punkte ──────────────────────────────────────
   Auf grossen Schirmen Wiederholung dessen, was im Bild steht.
   Auf dem Handy die einzige lesbare Fassung. */
.tst-teaser-punkte {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.tst-teaser-punkte li {
  font-size: 14px; line-height: 1.55; color: var(--muted);
  padding-left: 16px; border-left: 2px solid var(--green);
}
.tst-teaser-punkte strong {
  display: block; margin-bottom: 4px;
  font-size: 15px; font-weight: 700; color: var(--text);
}

.tst-teaser-cta {
  margin-top: 34px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.tst-teaser-klein { font-size: 13px; color: var(--muted); }

@media (max-width: 820px) {
  .tst-teaser { padding: 34px 22px; margin-bottom: 80px; }
  .tst-teaser-kopf { margin-bottom: 26px; }
  .tst-teaser-punkte { grid-template-columns: 1fr; gap: 16px; margin-top: 26px; }
  .tst-teaser-cta { margin-top: 26px; gap: 12px; }
  /* Der Knopf soll auf dem Handy die volle Breite haben — daneben steht
     sonst nichts, und ein halbbreiter Knopf wirkt wie ein Nebenweg. */
  .tst-teaser-cta .au-btn-primary { width: 100%; text-align: center; }
}