/* Ergänzungen zu perspective.css: Klassen, die Perspective selbst nicht erzeugt hat, und Bausteine der Verwaltung (af-*).
 * Werte im Stil von Perspective (Tailwind-Skala, Breakpoints sm 640, lg 1024, xl 1280). */
body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #fff; color: #1f2937; -webkit-font-smoothing: antialiased; }

.-left-\[29px\] { left: -29px; }
.accent-blue-500 { accent-color: #007aff; }
.aspect-\[1200\/630\] { aspect-ratio: 1200 / 630; }
.focus\:ring-blue-500\/20:focus { box-shadow: 0 0 0 2px #007aff33; }
.h-\[min\(800px\2c 90vh\)\] { height: min(800px, 90vh); }
.last\:border-0:last-child { border-width: 0; }
.max-h-\[90vh\] { max-height: 90vh; }
.max-h-\[calc\(100dvh-230px\)\] { max-height: calc(100dvh - 230px); }
.max-w-\[992px\] { max-width: 992px; }
@media (min-width: 640px) { .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .xl\:inline { display: inline; } .xl\:pl-24 { padding-left: 6rem; } }

/* Dialog-Hintergrund wie Perspective; Einstellungen oben statt mittig */
@media (min-height: 900px) { .af-oben { align-items: flex-start; padding-top: 11vh; } }
.max-w-\[1312px\] { max-width: 1312px; }
.af-hinter { background: rgba(17, 24, 39, .4); animation: af-ein .15s ease-out; }
@keyframes af-ein { from { opacity: 0; } to { opacity: 1; } }
.af-menue { animation: dropdownIn .15s ease-out; }
.af-panel { animation: af-rein .2s ease-out; }
@keyframes af-rein { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Editor: schwebende Seitenleiste links, Bühne daneben, Werkzeugleiste mittig über der Bühne */
.af-seitenleiste { left: 8px; top: 72px; bottom: 8px; width: 378px; }
.af-buehne { padding-left: 386px; }
.af-werkzeuge { left: calc(386px + (100vw - 386px) / 2); transform: translateX(-50%); }
@media (max-width: 900px) { .af-seitenleiste { display: none; } .af-buehne { padding-left: 0; } .af-werkzeuge { left: 50%; } }
.af-code { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }

/* Diagramme */
.af-achse { font: 10px Inter, sans-serif; fill: #6b7280; }
.af-dunkel { fill: #374151; }
.af-klein { font-size: 8px; }

/* Toast unten mittig */
.af-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: #111827; color: #fff; font-size: 14px; font-weight: 500; padding: 10px 16px; border-radius: 12px; box-shadow: 0 16px 24px -6px rgba(0,0,0,.15); }
.af-toast.gut { background: #16a34a; }
.af-toast.schlecht { background: #dc2626; }

/* Marken-Logo (nur mit Marken-Thema sichtbar, siehe marke/*.css) */
.af-logo, .af-logo-text, .af-login-logo { display: none; }

/* Anmeldung */
.af-login { min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: #f9fafb; padding: 16px; }