/* vorschau.css — app.digitale-vergabe.de/ (02.11.2026): Startadresse mit echtem Text, indexierbar. Menschen sehen sie
   nur kurz, dann leitet vorschau.js ins Cockpit; Suchmaschinen sehen nur diesen Text.
   03.11.2026 (Ruben): Logo oben, Lade-Spinner statt nacktem Status, gruene Haekchen, waermerer Hintergrund. */
html, body.va-vorschau { margin: 0; min-height: 100%; }
body.va-vorschau { display: grid; place-items: center; padding: 24px 16px; box-sizing: border-box; min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, sans-serif; color: #17171f;
  background: radial-gradient(1200px 600px at 50% -10%, #ecebfb 0%, #f4f4f8 55%, #f4f4f8 100%); }

.vs-karte { width: 100%; max-width: 480px; padding: 36px 34px 28px; border-radius: 22px; background: #fff;
  box-shadow: 0 0 0 1px rgba(13, 13, 37, .06), 0 30px 70px -28px rgba(29, 20, 60, .35); text-align: left; }

/* Logo oben */
.vs-logo { margin: 0 0 20px; }
.vs-logo-svg { height: 34px; width: auto; display: block; }

.vs-titel { margin: 0 0 12px; font-size: 1.6rem; line-height: 1.22; letter-spacing: -.02em; font-weight: 700;
  text-wrap: balance; color: #1d1a24; }
.vs-text { margin: 0 0 18px; color: #4a4a5a; line-height: 1.55; font-size: .98rem; }

/* Liste mit gruenen Haekchen statt grauer Bullets */
.vs-liste { margin: 0 0 22px; padding: 0; list-style: none; color: #3a3a48; line-height: 1.5; }
.vs-liste li { position: relative; padding: 7px 0 7px 30px; }
.vs-liste li + li { border-top: 1px solid #f0f0f5; }
.vs-liste li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%; background: #e9fbf0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 13px 13px; background-position: center; background-repeat: no-repeat; }

/* Status mit Lade-Spinner statt nacktem Text */
.vs-status { display: flex; align-items: center; gap: 9px; margin: 0 0 20px; font-size: .9rem; color: #6A2CF0; font-weight: 500; }
.vs-spinner { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(106, 44, 240, .25); border-top-color: #6A2CF0; animation: vsdreh .7s linear infinite; }
@keyframes vsdreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vs-spinner { animation: none; } }

.vs-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0; }
.vs-links a { color: #4a4a5a; font-size: .95rem; text-decoration: none; }
.vs-links a:hover { color: #1d1a24; text-decoration: underline; }
.vs-knopf { display: inline-block; padding: 12px 20px; border-radius: 12px; background: #111118; color: #fff !important;
  font-weight: 600; text-decoration: none !important; box-shadow: 0 8px 20px -10px rgba(17, 17, 24, .6); }
.vs-knopf:hover { background: #2a2a38; }

@media (max-width: 480px) {
  .vs-karte { padding: 28px 22px 24px; border-radius: 18px; }
  .vs-titel { font-size: 1.4rem; }
}