/* assets/css/demo.css — "Anfassen statt Prospekt": Hub-Sandbox + Browser-Studio. */

.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 780px) { .demo-grid { grid-template-columns: 1fr; } }
.demo-card {
  position: relative; border-radius: var(--r-lg); padding: 30px;
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 14px;
}
.demo-card.live { background: #0f0e11; color: #f2efe9; border-color: rgba(242,239,233,.12); }
.demo-card.live .demo-sub { color: #a8a49b; }
.demo-card.live .tag { color: var(--accent); }
.demo-card h3 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.demo-sub { font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); max-width: 46ch; }
.demo-tag {
  position: absolute; top: 22px; right: 22px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 999px;
}
.demo-tag.soon { background: var(--surface-3); color: var(--ink-muted); border: 1px solid var(--line-strong); }
/* .demo-card.live ist der dunkle "Hub-Sandbox"-Karten-Kontext - --ink-muted
   ist eine Hell-Theme-Farbe (2.43:1 auf dem dunklen Karten-Grund, WCAG-
   Fund 26.08.), hier auf denselben gedaempften Hellton wie .demo-note
   umgestellt. */
.demo-card.live .demo-tag.soon { background: rgba(242,239,233,.08); border-color: rgba(242,239,233,.18); color: #8e8c8a; }
.demo-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.demo-card.live .btn-ghost { border-color: rgba(242,239,233,.24); color: #f2efe9; }
.demo-note { font-size: 12.5px; color: var(--ink-faint); font-family: var(--mono); }
.demo-card.live .demo-note { color: #7f7a70; }
/* War opacity:.6 - auf hellen Karten unproblematisch, aber auf dem
   dunklen "Hub-Sandbox"-Grund blendete die Opacity Text UND Hintergrund
   beide Richtung Schwarz, Kontrast fiel auf 3.9:1 (WCAG-Fund 26.08.).
   Jetzt explizite, gedaempfte Farben statt Transparenz - dasselbe Muster
   wie .tag.status-soon, funktioniert unabhaengig vom Karten-Hintergrund. */
.demo-cta-disabled { background: var(--surface-3); color: var(--ink-muted); box-shadow: none; pointer-events: none; }
.demo-card.live .demo-cta-disabled { background: rgba(242,239,233,.1); color: #8e8c8a; }

/* Hub-Sandbox scharf (06.09.): assets/js/demo-status.js schaltet die
   [data-demo-soon]/[data-demo-live]-Bloecke per `hidden` um. .demo-actions
   ist display:flex - das UA-[hidden] muss wie in pricing.css ueberstimmt
   werden, sonst bleiben beide Knopfreihen sichtbar. */
.demo-card [hidden] { display: none !important; }
.demo-tag.is-live { background: rgba(245,165,36,.16); color: var(--accent); border: 1px solid rgba(245,165,36,.45); }
.demo-form { margin-top: auto; display: flex; flex-direction: column; gap: 10px; position: relative; }
.demo-form .demo-actions { margin-top: 0; }
.demo-form .btn { cursor: pointer; }
.demo-form .btn[disabled] { opacity: .6; cursor: wait; }
/* Turnstile "interaction-only": unsichtbar, ausser Cloudflare verlangt eine
   Interaktion - dann legt es sich selbst ueber die Seite, der Container
   darf also 1x1 bleiben (Muster Alt-Portal support-widget.js). */
.demo-turnstile { position: absolute; bottom: 0; right: 0; width: 1px; height: 1px; overflow: hidden; }
/* Beide Selektoren noetig: .demo-card.live .demo-note (3 Klassen) wuerde den
   Fehlerton sonst auf der dunklen Karte ueberstimmen (Sichtpruefung 06.09.). */
.demo-turnstile-hint.is-error, .demo-card.live .demo-turnstile-hint.is-error { color: var(--accent); }