/* Tokens + Utility-Klassen der App (src/index.css), nur innerhalb von
   .app-snippet gültig, damit die Landing-Styles unberührt bleiben.
   Neue Klasse in einem Ausschnitt: hier Regel ergänzen UND in
   infra/landing-src/build.mjs (KNOWN_CLASSES) eintragen. */
.app-snippet {
  --color-page: #f5f6f8; --color-surface: #ffffff; --color-surface-2: #fafbfc;
  --color-surface-ink: #0b1220; --color-line: #e6e8ee; --color-line-strong: #d2d6df;
  --color-ink: #0b1220; --color-ink-2: #3a4357; --color-ink-3: #6b7384; --color-ink-4: #9aa1b0;
  --color-brand: #1d51ff; --color-brand-2: #0a3ce0; --color-brand-soft: #eaefff;
  --color-ok: #16a34a; --color-warn: #d97706; --color-err: #dc2626; --color-pro: #f5b400;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  font-family: var(--font-sans); font-size: 13px; line-height: 1.4;
  color: var(--color-ink); text-align: left;
}
.app-snippet.theme-dark {
  --color-page: #0d1017; --color-surface: #151a23; --color-surface-2: #1b2230;
  --color-surface-ink: #0a0e15; --color-line: #232a39; --color-line-strong: #2f384a;
  --color-ink: #e6e9f2; --color-ink-2: #c2c8d4; --color-ink-3: #8c93a4; --color-ink-4: #5e6678;
  --color-brand: #7ea4ff; --color-brand-2: #a3bfff; --color-brand-soft: #1c2746;
  --color-ok: #34d399; --color-warn: #fbbf24; --color-err: #f87171;
}
/* Preflight-Ersatz (Tailwind) nur im Ausschnitt */
.app-snippet *, .app-snippet *::before, .app-snippet *::after { box-sizing: border-box; border: 0 solid; }
.app-snippet h1, .app-snippet h2, .app-snippet h3, .app-snippet h4, .app-snippet p,
.app-snippet ul, .app-snippet ol { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; list-style: none; }
.app-snippet svg { display: block; vertical-align: middle; max-width: 100%; }
.app-snippet svg text { font-family: var(--font-mono); }

.app-snippet .bg-surface { background-color: var(--color-surface); }
.app-snippet .bg-surface-2 { background-color: var(--color-surface-2); }
.app-snippet .bg-page { background-color: var(--color-page); }
.app-snippet .bg-ink { background-color: var(--color-ink); }
.app-snippet .bg-warn { background-color: var(--color-warn); }
.app-snippet .bg-warn\/10 { background-color: color-mix(in srgb, var(--color-warn) 10%, transparent); }
.app-snippet .bg-brand-soft { background-color: var(--color-brand-soft); }
.app-snippet .hover\:bg-surface-2:hover { background-color: var(--color-surface-2); }
.app-snippet .border { border-width: 1px; border-color: var(--color-line); }
.app-snippet .border-r { border-right-width: 1px; border-color: var(--color-line); }
.app-snippet .border-line { border-color: var(--color-line); }
.app-snippet .border-line-strong { border-color: var(--color-line-strong); }
.app-snippet .border-brand { border-color: var(--color-brand); }
.app-snippet .border-warn\/30 { border-color: color-mix(in srgb, var(--color-warn) 30%, transparent); }
.app-snippet .text-ink { color: var(--color-ink); }
.app-snippet .text-ink-2 { color: var(--color-ink-2); }
.app-snippet .text-ink-3 { color: var(--color-ink-3); }
.app-snippet .text-ink-4 { color: var(--color-ink-4); }
.app-snippet .text-brand { color: var(--color-brand); }
.app-snippet .text-ok { color: var(--color-ok); }
.app-snippet .text-warn { color: var(--color-warn); }
.app-snippet .text-err { color: var(--color-err); }
.app-snippet .text-\[11px\] { font-size: 11px; }
.app-snippet .text-left { text-align: left; }
.app-snippet .num, .app-snippet .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.app-snippet .shrink-0 { flex-shrink: 0; }
.app-snippet .flex-1 { flex: 1 1 0%; }
.app-snippet .w-full { width: 100%; }
.app-snippet .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-snippet .inline-flex { display: inline-flex; }
.app-snippet .hidden { display: none; }
.app-snippet .opacity-40 { opacity: .4; }
.app-snippet .opacity-50 { opacity: .5; }
.app-snippet .opacity-100 { opacity: 1; }
.app-snippet .font-bold { font-weight: 700; }
.app-snippet .font-semibold { font-weight: 600; }
.app-snippet .mt-4 { margin-top: 1rem; }
.app-snippet .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); }
/* .active: Zustandsklasse aus der App, ohne eigene Regel */

/* Umgewandelte Bedienelemente (s17): sehen aus wie in der App, tun nichts */
.app-snippet .snip-btn { display: inline-flex; align-items: center; cursor: default; font: inherit; color: inherit; background: none; text-align: left; }
.app-snippet .snip-input { display: inline-block; font: inherit; min-width: 4ch; }

/* Schmale Bildschirme: dichte Raster umbrechen */
@media (max-width: 480px) {
  .app-snippet [style*="repeat(4,"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .app-snippet [style*="repeat(5,"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}