/* ByteGleam Wartungsseite — 1:1 aus Maintenance.dc.html (Claude Design), Inline-Styles als Klassen (CSP ohne 'unsafe-inline'). */
html,body{margin:0;padding:0;height:100%;background:#0b0a1a}
a{color:var(--accent-fg);text-decoration:none}
a:hover{color:var(--accent-fg-hover);text-decoration:underline}

@keyframes bgm-spin{to{transform:rotate(360deg)}}
@keyframes bgm-spin-rev{to{transform:rotate(-360deg)}}
@keyframes bgm-dash{to{stroke-dashoffset:-100}}
@keyframes bgm-float{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-6px)}}
@keyframes bgm-node{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes bgm-scan{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(130px);opacity:0}}
@keyframes bgm-indet{0%{transform:translateX(-110%)}100%{transform:translateX(340%)}}
@keyframes bgm-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes bgm-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---------- Seite ---------- */
.bgm{position:relative;min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;background:var(--bg);color:var(--fg);font-family:var(--font);overflow:hidden}
.bgm-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bgm-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 55% at 50% 48%,var(--bg) 0%,transparent 70%);opacity:.85}

.bgm-header{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.5rem clamp(1.25rem,4vw,2rem);max-width:1280px;width:100%;box-sizing:border-box;margin:0 auto}
.bgm-brand{display:flex;align-items:center;gap:.625rem;color:var(--fg);text-decoration:none}
.bgm-brand:hover{color:var(--fg);text-decoration:none}
.bgm-brand img{height:32px;width:auto;display:block}
.bgm-wordmark{font-size:1.25rem;letter-spacing:-.01em;white-space:nowrap}
.bgm-wordmark .l{font-weight:300}
.bgm-wordmark .b{font-weight:700}
.bgm-status{white-space:nowrap;display:flex;align-items:center;gap:.625rem;padding:.4rem .85rem;border:1px solid var(--border);border-radius:var(--r-full);background:var(--surface);font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:.75rem;color:var(--muted);letter-spacing:.04em}
/* DS StatusDot kind=warning pulse */
.bgm-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--warning);animation:bg-pulse 1.6s ease-in-out infinite}

.bgm-main{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem clamp(1.25rem,4vw,2rem) 3rem;gap:1.75rem}
.bgm-emblem-wrap{width:clamp(170px,34vw,280px);aspect-ratio:1;position:relative}
.bgm-emblem{position:absolute;inset:0;animation:bgm-in 900ms cubic-bezier(.16,1,.3,1) both}
.bgm-emblem svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bgm-emblem img{position:absolute;left:50%;top:50%;width:40%;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 0 22px rgba(255,94,43,.45));animation:bgm-float 3.6s ease-in-out infinite}
.e-spin{transform-origin:100px 100px}
.e-spin-60{animation:bgm-spin 60s linear infinite}
.e-spin-9{animation:bgm-spin 9s linear infinite}
.e-spin-14r{animation:bgm-spin-rev 14s linear infinite}
.e-ring-outer{fill:none;stroke:var(--border-strong);stroke-width:1;stroke-dasharray:1.5 5}
.e-ring{fill:none;stroke:var(--border);stroke-width:1}
.e-dash{fill:none;stroke:url(#bgm-grad);stroke-width:1.6;stroke-linecap:round}
.e-dash-a{stroke-dasharray:24 76;animation:bgm-dash 3.2s linear infinite}
.e-dash-b{stroke-dasharray:6 94;stroke-dashoffset:50;animation:bgm-dash 5.4s linear infinite reverse}
.e-node{fill:url(#bgm-grad);animation:bgm-node 2.4s ease-in-out infinite}
.e-node:nth-of-type(2){animation-delay:.4s}
.e-node:nth-of-type(3){animation-delay:.8s}
.e-node:nth-of-type(4){animation-delay:1.2s}
.e-node:nth-of-type(5){animation-delay:1.6s}
.e-node:nth-of-type(6){animation-delay:2s}
.e-core{fill:var(--surface);stroke:var(--border-strong);stroke-width:1}
.e-scan{animation:bgm-scan 2.8s cubic-bezier(.2,.6,.2,1) infinite}

.bgm-copy{display:flex;flex-direction:column;align-items:center;gap:1.125rem;max-width:40rem}
/* DS EyebrowPill */
.bgm-eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .7rem;border-radius:var(--r-full);background:var(--tint);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-fg);font-family:var(--font);white-space:nowrap}
.bgm-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad-diag);flex-shrink:0}
.bgm-h1{margin:0;font-weight:700;font-size:clamp(2.25rem,6.2vw,3.75rem);line-height:1.08;letter-spacing:-.02em;text-wrap:balance;text-shadow:var(--glow-amber,0 0 32px rgba(255,164,4,.25))}
.bgm-lead{margin:0;font-weight:300;font-size:clamp(1rem,2.2vw,1.125rem);line-height:1.6;color:var(--muted);text-wrap:pretty;max-width:34rem}

.bgm-status-box{width:min(22rem,100%);display:flex;flex-direction:column;gap:.75rem;align-items:stretch}
.bgm-progress{position:relative;height:3px;border-radius:var(--r-full);background:var(--surface-2);overflow:hidden}
.bgm-progress span{position:absolute;inset:0;width:30%;border-radius:inherit;background:var(--grad-diag);animation:bgm-indet 1.8s cubic-bezier(.2,.6,.2,1) infinite}
.bgm-ticker{font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:.8125rem;color:var(--muted);display:flex;justify-content:center;gap:.25rem;min-height:1.3em}
.bgm-ticker .p{color:var(--accent-fg)}
.bgm-caret{width:.55em;height:1.05em;background:var(--accent-fg);align-self:center;animation:bgm-blink 1s steps(1) infinite}

.bgm-footer{position:relative;z-index:2;border-top:1px solid var(--border)}
.bgm-footer-in{max-width:1280px;margin:0 auto;padding:1.25rem clamp(1.25rem,4vw,2rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;font-size:.8125rem;color:var(--muted);font-weight:300}
.bgm-claim{font-weight:700;color:var(--fg)}
.bgm-legal{display:flex;gap:1.25rem}
/* Footer-Buttons sehen aus wie die Links im Mockup */
.bgm-linkbtn{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;font-weight:300;color:var(--accent-fg);cursor:pointer}
.bgm-linkbtn:hover{color:var(--accent-fg-hover);text-decoration:underline}

/* ---------- Popups (DS Modal, breitere Lesefassung) ---------- */
.bgm-modal{width:calc(100% - 2.5rem);max-width:42rem;max-height:min(85vh,85dvh);box-sizing:border-box;padding:0;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);color:var(--fg);box-shadow:var(--sh-lg);overflow:hidden;font-family:var(--font)}
.bgm-modal[open]{display:flex;flex-direction:column;animation:bg-toast var(--dur-slow) var(--ease-entrance)}
.bgm-modal:focus,.bgm-modal:focus-visible{outline:none}
.bgm-modal::backdrop{background:var(--overlay);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.bgm-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid var(--border)}
.bgm-modal-head h2{margin:0;font-weight:700;font-size:1.25rem;line-height:1.25;color:var(--fg)}
.bgm-modal-head p{margin:.25rem 0 0;font-size:.8125rem;color:var(--muted)}
.bgm-close{display:flex;flex-shrink:0;border:none;border-radius:var(--r-sm);background:none;color:var(--muted);cursor:pointer;padding:2px;transition:background var(--dur-fast),color var(--dur-fast)}
.bgm-close:hover{background:var(--surface-2);color:var(--fg)}
.bgm-close svg{width:20px;height:20px}
.bgm-modal-body{overflow-y:auto;overscroll-behavior:contain;padding:1.25rem 1.5rem 1.75rem;color:var(--muted);font-size:.95rem;line-height:1.6;scrollbar-color:var(--border-strong) transparent}
.bgm-modal-body h3{margin:1.75rem 0 .5rem;font-size:1.0625rem;line-height:1.3;color:var(--fg)}
.bgm-modal-body h3:first-child{margin-top:0}
.bgm-modal-body h4{margin:1.25rem 0 .35rem;font-size:.95rem;line-height:1.35;color:var(--fg)}
.bgm-modal-body p{margin:0 0 .75rem}
.bgm-modal-body ul{margin:0 0 .75rem;padding-left:1.25rem}
.bgm-modal-body li{margin-bottom:.4rem}
.bgm-modal-body strong{color:var(--fg)}
.bgm-modal-body a{overflow-wrap:anywhere}
.bgm-modal-body .caps{font-size:.85rem}
.bgm-modal-body .stand{margin-top:1.5rem;font-size:.8125rem}

/* Ohne JS: Dialoge als normale Abschnitte unter der Seite (per :target erreichbar) */
.no-js .bgm-modal{display:block;position:static;margin:2rem auto;max-height:none}
.no-js .bgm-close{display:none}

@media (max-width:480px){
  .bgm-modal-head{padding:1.25rem 1.25rem .875rem}
  .bgm-modal-body{padding:1rem 1.25rem 1.5rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important}}