/* Videos mit KI bearbeiten — Seiten-Datei (v2.8). Lädt nach /lese-seite.css und vor /circuit-site.min.css.
   Nur Bausteine dieser Seite: Wege-Karten, Video-Karten, Ablauf in drei Schritten, Kopierknöpfe. Alles andere kommt aus lese-seite.css.
   Ersetzt die alte Fassung mit --c-*-Farben. Keine Regel für alle Links. */

/* Drei Wege im Kopf: ganze Karte ist ein Link (Funktions-Rahmen im Lese-Rahmen, ohne Leiterbahnen), Pfeil rechts mit 40 px Platz */
.vg-routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:22px 0 8px}
.vg-route{position:relative;display:block;padding:18px 40px 16px 18px;border:1px solid var(--x-line);border-radius:var(--x-radius-sm,6px);background:var(--x-bg-raised);color:var(--x-ink);text-decoration:none}
.vg-route::after{content:"›";position:absolute;right:14px;bottom:10px;font:28px/1 var(--x-font-display,monospace);color:var(--x-cyan-doc)}
.vg-route:hover{border-color:var(--x-cyan-doc)}
.vg-route:focus-visible{outline:2px solid var(--x-blue-light);outline-offset:3px}
.vg-route.vg-wide{grid-column:1/-1}
.vg-route .uc-k{display:block;font:18px/1.2 var(--x-font-display,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--x-blue-light)}
.uc-doc.reading-frame .vg-route h2{display:block;margin:8px 0 6px;padding:0;border:0;font:600 var(--x-fs-h3)/1.3 var(--x-font-ui);color:var(--x-ink-bright)}
.uc-doc .vg-route p{margin:0 0 10px;font-size:var(--x-fs-body-sm);color:var(--x-ink-soft)}
.vg-route .vg-go{font-size:var(--x-fs-ui);color:var(--x-cyan-doc)}

/* Zwei Videos nebeneinander, Laden erst nach Klick (video-guide.js) */
.vg-videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0 12px}
.vg-video{min-width:0;padding:14px;border:1px solid var(--x-line-quiet);border-radius:var(--x-radius-sm,6px);background:var(--x-bg-raised)}
.uc-doc .vg-video h3{margin:0 0 6px}
.uc-doc .vg-video>p{margin:0;min-height:3em;font-size:var(--x-fs-body-sm);color:var(--x-ink-soft)}
.vg-stage{display:grid;place-items:center;aspect-ratio:9/16;margin:12px 0;overflow:hidden;border:1px solid var(--x-line-quiet);border-radius:var(--x-radius-sm,6px);background:var(--x-bg-sunken)}
.vg-stage iframe{width:100%;height:100%;border:0}
.vg-placeholder{display:grid;justify-items:center;gap:10px;padding:16px;text-align:center}
.vg-play{font:48px/1 var(--x-font-display,monospace);color:var(--x-cyan-doc)}
.uc-doc .vg-placeholder p{margin:0}
.uc-doc .vg-note{font-size:var(--x-fs-ui);color:var(--x-ink-muted)}
.vg-video>a{font-size:var(--x-fs-body-sm)}
.vg-unload{display:block;margin:0 0 6px}

/* Ablauf in drei Schritten (erweiterte Variante) */
.vg-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0}
.vg-flow>div{min-width:0;padding:14px;border:1px solid var(--x-line-quiet);border-radius:var(--x-radius-sm,6px);background:var(--x-bg-raised)}
.vg-sym{display:block;font:20px/1.2 var(--x-font-display,monospace);color:var(--x-amber);white-space:nowrap}
.uc-doc .vg-flow h3{margin:10px 0 6px;font-size:var(--x-fs-h4)}
.uc-doc .vg-flow p{margin:0;font-size:var(--x-fs-body-sm)}
.guide-prose ul,.guide-prose ol{margin:0 0 14px;padding-left:1.3em}
.uc-doc .guide-prose li{margin:0 0 8px}
.uc-doc .vg-switch{margin:18px 0 0;padding-top:14px;border-top:.5px solid var(--x-line-hair)}

/* Kopierknopf über jedem Befehl (video-guide.js) */
button.vg-copy{display:flex;margin:0 0 8px auto;min-height:40px;padding:6px 14px;font-size:var(--x-fs-ui)}

@media (max-width:700px){.vg-routes,.vg-flow{grid-template-columns:minmax(0,1fr)}.vg-route.vg-wide{grid-column:auto}}
@media (max-width:480px){.vg-videos{grid-template-columns:minmax(0,1fr)}.vg-video{width:100%;max-width:340px;margin:auto}.uc-doc .vg-video>p{min-height:0}}
@media print{.vg-stage,.load-video,button.vg-copy,.vg-unload{display:none!important}.vg-routes,.vg-videos,.vg-flow{display:block}.vg-route,.vg-video,.vg-flow>div{margin:0 0 4mm;background:#fff!important;border-color:#bbb!important;break-inside:avoid}.vg-route::after{content:none}}