/* Moonlight-Anleitung (/guide) */
.guide h1 { margin-bottom: 8px; }
.guide__needs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 28px 0 36px; }
.guide__needs div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 14px 18px; display: grid; gap: 2px; }
.guide__needs span { color: var(--muted); font-size: 0.9375rem; }

.guide__tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; width: fit-content; max-width: 100%; }
.guide__tabs button { border: 0; background: transparent; color: var(--muted); font: 600 0.9375rem/1 var(--font-body); padding: 10px 18px; border-radius: 999px; cursor: pointer; }
.guide__tabs button[aria-selected="true"] { background: var(--cobalt); color: var(--on-cobalt); }
.guide__tabs button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }

.guide__steps { list-style: none; margin: 32px 0 0; padding: 0; counter-reset: gstep; display: grid; gap: 20px; }
.guide-step { counter-increment: gstep; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: clamp(18px, 3vw, 28px); }
.guide-step__text h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font-size: 1.25rem; }
.guide-step__text h2::before { content: counter(gstep); flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cobalt); color: var(--on-cobalt); font: 800 1rem/1 var(--font-display); }
.guide-step__text p { margin: 0; color: var(--muted); }
.guide-step__fig { margin: 0; }
.guide-shot { display: block; width: 100%; height: auto; border-radius: var(--radius-s); border: 1px solid var(--line); }
kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; font: 600 0.8125rem/1.4 var(--font-body); background: var(--bg); color: var(--ink); }

.guide__help { margin-top: 48px; padding: 24px 28px; border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--line); }
.guide__help h2 { margin-top: 0; font-size: 1.25rem; }
.guide__help ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--muted); }
.guide__help strong { color: var(--ink); }

@media (max-width: 760px) { .guide-step { grid-template-columns: 1fr; } .guide-step__fig { order: -1; } }
@media (max-width: 520px) {
    .guide__tabs { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border-radius: 14px; }
    .guide__tabs button { padding: 10px 6px; font-size: 0.8125rem; border-radius: 10px; }
}

/* SVG-Skizzen */
.guide-art { display: block; width: 100%; height: auto; }
.guide-art text { font-family: var(--font-body); }
.ga-frame { fill: #1B2236; }
.ga-screen { fill: #0E1322; }
.ga-ctl { fill: #2A3350; }
.ga-bar { fill: #161D31; }
.ga-dialog { fill: #1E2740; stroke: #2E3A5C; }
.ga-input { fill: #0E1322; stroke: #3A4870; }
.ga-tile { fill: #1E2740; }
.ga-tile--on { fill: #24305A; stroke: #7088FF; stroke-width: 2; }
.ga-accent { fill: #7088FF; }
.ga-btn { fill: #FFC42E; }
.ga-btn-text { fill: #0F1830; font-weight: 700; }
.ga-title { fill: #E8EDF7; font-weight: 600; }
.ga-muted { fill: #8F9BB8; }
.ga-code { fill: #C9D4F5; font-family: ui-monospace, monospace !important; }
.ga-pin { fill: #FFFFFF; font-weight: 800; letter-spacing: .1em; }
.ga-track { fill: #2E3A5C; }
.ga-play { fill: #FFFFFF; }
.ga-stroke-light { fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
    .ga-pulse { animation: ga-pulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
    .ga-load { animation: ga-load 2.4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: left; }
}
@keyframes ga-pulse { 50% { transform: scale(1.25); opacity: .7; } }
@keyframes ga-load { from { transform: scaleX(.2); } to { transform: scaleX(1.65); } }