/* Live-Demo-Knopf + "Demo wird gestartet"-Dialog (siehe _DemoLaunch.cshtml / demo-launch.js) */

.demo-launch-wrap { margin-top: 12px; }
.demo-launch-wrap .gh-btn { margin-top: 0; }
.demo-launch--primary { position: relative; }
.demo-launch-ext { font-size: .95em; opacity: .85; }

.demo-launch-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--text-muted, #a1a1aa); text-align: center; }
.demo-launch-status { display: inline-flex; align-items: flex-start; gap: 8px; text-align: left; }
.demo-launch-status .demo-dot { margin-top: 5px; }
.demo-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; flex: 0 0 8px; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.demo-launch-status.is-online .demo-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.demo-launch-status.is-checking .demo-dot { animation: demoPulse 1.1s ease-in-out infinite; }
.demo-launch-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--text-muted, #a1a1aa); text-align: center; word-break: break-word; }
.demo-launch-hint i { margin-right: 4px; opacity: .8; }

/* Kennzeichnung auf Projektkarten (/Projekte) */
.project-card-demo {
    position: absolute; left: 12px; bottom: 12px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
    color: #fff; background: rgba(10, 10, 14, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .14);
}
.project-card-demo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.project-card-media, .projects-spotlight-media { position: relative; }

/* ---------- Dialog ---------- */
.demo-dialog {
    position: fixed; inset: 0; margin: auto; height: fit-content;
    width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
    padding: 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px;
    background: var(--surface, #121216); color: var(--text, #fafafa);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.demo-dialog::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.demo-dialog[open] { animation: demoIn .22s ease-out; }
.demo-dialog__body { padding: 22px 22px 18px; }
.demo-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.demo-dialog__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.demo-dialog button, .demo-dialog a { font-family: inherit; }
.demo-dialog__close { background: transparent; border: 0; color: inherit; opacity: .6; font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.demo-dialog__close:hover, .demo-dialog__close:focus-visible { opacity: 1; background: rgba(255, 255, 255, .06); }
.demo-dialog__text { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--text-muted, #a1a1aa); }

.demo-dialog__state { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.demo-dialog__spinner { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; border: 2.5px solid rgba(139, 92, 246, .25); border-top-color: var(--accent, #8b5cf6); animation: demoSpin .8s linear infinite; }
.demo-dialog__check { display: none; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; background: #22c55e; color: #052e16; font-weight: 800; font-size: 13px; align-items: center; justify-content: center; }
.demo-dialog__statetext { flex: 1; min-width: 0; }
.demo-dialog__statetext strong { display: block; font-size: 14px; }
.demo-dialog__statetext small { display: block; font-size: 12.5px; color: var(--text-muted, #a1a1aa); margin-top: 2px; }
.demo-dialog__time { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-muted, #a1a1aa); }

.demo-dialog__bar { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; margin: 12px 0 0; }
.demo-dialog__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent, #8b5cf6), var(--accent-2, #6366f1)); transition: width .6s ease; }

.demo-dialog__hint { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(139, 92, 246, .08); border: 1px dashed rgba(139, 92, 246, .35); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.demo-dialog__hint span { flex: 1; min-width: 0; word-break: break-word; }
.demo-dialog__hint button { background: transparent; border: 1px solid rgba(255, 255, 255, .18); color: inherit; border-radius: 8px; font-size: 12px; padding: 3px 9px; cursor: pointer; white-space: nowrap; }

.demo-dialog__actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.demo-dialog__open {
    flex: 1 1 200px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 16px; border-radius: 12px; font-weight: 700; font-size: 14.5px; text-decoration: none;
    background: rgba(255, 255, 255, .06); color: var(--text, #fafafa); border: 1px solid rgba(255, 255, 255, .12);
    transition: background .25s, transform .15s, box-shadow .25s;
}
.demo-dialog__open:hover { transform: translateY(-1px); color: var(--text, #fafafa); }
.demo-dialog__cancel { flex: 0 0 auto; padding: 12px 16px; border-radius: 12px; background: transparent; border: 1px solid rgba(255, 255, 255, .12); color: var(--text-muted, #a1a1aa); cursor: pointer; font-weight: 600; }
.demo-dialog__fine a { color: inherit; text-decoration: underline; }
.demo-dialog__fine { margin: 12px 0 0; font-size: 11.5px; color: var(--text-muted, #a1a1aa); opacity: .8; text-align: center; }

.demo-dialog.is-ready .demo-dialog__spinner { display: none; }
.demo-dialog.is-ready .demo-dialog__check { display: inline-flex; }
.demo-dialog.is-ready .demo-dialog__open { background: #22c55e; border-color: #22c55e; color: #052e16; box-shadow: 0 10px 30px rgba(34, 197, 94, .3); }
.demo-dialog.is-ready .demo-dialog__bar span { background: #22c55e; }
.demo-dialog.is-slow .demo-dialog__statetext small { color: #fbbf24; }

@keyframes demoSpin { to { transform: rotate(360deg); } }
@keyframes demoPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes demoIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .demo-dialog[open], .demo-dialog__spinner, .demo-launch-status.is-checking .demo-dot { animation: none; }
}

/* Handy: Dialog als Bottom-Sheet */
@media (max-width: 575.98px) {
    .demo-dialog { margin: auto auto 0; width: 100vw; max-width: 100vw; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); }
    .demo-dialog__cancel { flex: 1 1 100%; }
}

/* Die Website blendet auf dem Desktop den System-Mauszeiger aus und zeichnet einen
   eigenen (cursorDot/cursorRing). Der Dialog liegt aber in der obersten Ebene des
   Browsers (Top Layer) - darueber kann der eigene Zeiger nicht gezeichnet werden.
   Deshalb im Dialog (und auf dem abgedunkelten Hintergrund) den normalen Zeiger zeigen. */
body.has-custom-cursor .demo-dialog,
body.has-custom-cursor .demo-dialog * { cursor: default !important; }
body.has-custom-cursor .demo-dialog a,
body.has-custom-cursor .demo-dialog button { cursor: pointer !important; }
body.demo-dialog-open #cursorDot,
body.demo-dialog-open #cursorRing { opacity: 0 !important; }

/* ---------- Windows-Demo-Download (siehe _DemoDownload.cshtml / demo-download.js) ---------- */
.project-card-demos { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.project-card-demos .project-card-demo { position: static; }
.project-card-demo--dl::before { display: none; }
.project-card-demo--dl i { font-size: 11px; }
.dl-dialog [hidden] { display: none !important; }
.dl-facts { margin: 0 0 4px; display: grid; gap: 6px; font-size: 13.5px; }
.dl-facts > div { display: flex; gap: 12px; justify-content: space-between; padding: 7px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.dl-facts dt { font-weight: 500; color: var(--text-muted, #a1a1aa); }
.dl-facts dd { margin: 0; font-weight: 600; text-align: right; word-break: break-all; }
.dl-more { margin: 12px 0 0; font-size: 13px; color: var(--text-muted, #a1a1aa); }
.dl-more summary { cursor: pointer; color: var(--text, #fafafa); font-weight: 600; }
.dl-more p { margin: 8px 0 0; line-height: 1.5; }
.dl-sha { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .08); display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; }
.dl-sha__label { grid-column: 1 / -1; font-size: 12px; color: var(--text-muted, #a1a1aa); }
.dl-sha > code { font-size: 11.5px; word-break: break-all; color: var(--text, #fafafa); background: none; padding: 0; }
.dl-sha button { background: transparent; border: 1px solid rgba(255, 255, 255, .18); color: inherit; border-radius: 8px; font-size: 12px; padding: 3px 9px; cursor: pointer; white-space: nowrap; }
.dl-sha small { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-muted, #a1a1aa); }
.dl-sha small code { font-size: 11.5px; }
.dl-dialog .dl-go { background: var(--accent, #8b5cf6); border-color: var(--accent, #8b5cf6); color: #fff; }
.dl-dialog .dl-go:hover { color: #fff; box-shadow: 0 10px 30px rgba(139, 92, 246, .35); }