/* =========================================================
   SECTION MONSTERS – Testprogramm
   css/tester.css

   Ergaenzt shopbriefing.css. Nur was die Seite zusaetzlich
   braucht: die Platzanzeige und das Freitextfeld.
   ========================================================= */

/* ── Platzstand ───────────────────────────────────────────
   Bewusst zurueckhaltend: Der Balken ist Information, kein Countdown-
   Timer. Eine rote, blinkende Knappheitsanzeige wuerde dem Ton der
   Seite widersprechen — sie wirbt mit Ehrlichkeit, nicht mit Druck. */
.tst-plaetze {
  max-width: 460px;
  margin: 0 auto 28px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(99, 102, 241, .07);
  border: 1px solid rgba(99, 102, 241, .18);
}
.tst-balken {
  height: 7px;
  border-radius: 999px;
  background: rgba(99, 102, 241, .16);
  overflow: hidden;
  margin-bottom: 9px;
}
.tst-balken-fuell {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  transition: width .6s ease;
}
.tst-plaetze-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: var(--sb-text, #333);
}
.tst-plaetze-text strong { color: #4f46e5; }

/* ── Freitextfeld ────────────────────────────────────────── */
.tst-textarea {
  resize: vertical;
  min-height: 76px;
  font-family: inherit;
  line-height: 1.55;
}

.tst-klein {
  display: block;
  font-size: 13px;
  opacity: .78;
}

/* ── Einordnungsfragen (Umsatz + Mitarbeiter) ─────────────
   Zwei kurze Auswahlfelder nebeneinander. Sie gehoeren inhaltlich
   zusammen, also stehen sie auch zusammen — untereinander laesen sie
   sich wie zwei getrennte Huerden, nebeneinander wie eine. */
.tst-paar-titel {
  margin: 0 0 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.tst-paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.tst-paar label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--muted);
}

/* appearance:none ist hier nicht Kosmetik. Ein natives <select> zeichnet
   seinen Pfeil in der Farbe des Betriebssystems — auf dem dunklen Grund
   dieser Seite wird daraus unter Windows ein heller Kasten am rechten
   Rand. Also eigener Pfeil als SVG im Hintergrund.
   Die Optionsliste selbst zeichnet weiterhin das System; darauf hat CSS
   keinen Zugriff, und color-scheme sorgt dafuer, dass sie dunkel bleibt. */
.tst-select {
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  cursor: pointer;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

@media (max-width: 460px) {
  /* Unter 460px stehen zwei Spalten so eng, dass „100.000 – 500.000 €"
     abgeschnitten wird. Dann lieber untereinander. */
  .tst-paar { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .tst-plaetze { margin-bottom: 22px; padding: 12px 14px; }
  .tst-plaetze-text { font-size: 13px; }
}


/* ── Banner oben ──────────────────────────────────────────
   Dasselbe Bild wie in der Anzeige und auf der Startseite. Bewusst mit
   Deckel nach oben (negativer Rand), damit es buendig unter dem Kopf
   sitzt und nicht wie ein eingeklebter Fremdkoerper wirkt. */
.tst-banner { margin: 0 auto 26px; max-width: 720px; }
.tst-banner img {
  width: 100%; height: auto; display: block;
  border-radius: 14px;
}
/* Platzhalter nur ohne hinterlegtes Bild — gleiche Bauart wie auf der
   Startseite: :has() statt display:none, sonst laedt ein Bild ohne
   Layout-Box nie und der Platzhalter bliebe stehen. */
.tst-banner:not(:has(img[src])) { display: none; }

@media (max-width: 560px) {
  .tst-banner { margin-bottom: 18px; }
}

/* ── Erwartung vor dem Absenden ───────────────────────────
   Bewusst kein Warnkasten: Es ist keine Warnung, sondern eine
   Klarstellung. Als roter Kasten würde sie vom Bewerben abhalten. */
.tst-erwartung {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 11px;
  background: rgba(99, 102, 241, .07);
  border: 1px solid rgba(99, 102, 241, .18);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.tst-erwartung strong { color: var(--text); }