/* HELLO XR Use Case Library – Präfix uc- */
#uc { --ucd: #0b0b2b; overflow-x: clip; }
.uc-hero { padding: 26px 0 8px; background: radial-gradient(900px 340px at 85% -10%, rgba(255, 61, 139, .10), transparent 70%), radial-gradient(700px 300px at 0% 0%, rgba(33, 199, 168, .12), transparent 70%); }
.uc-hero h1 { font-size: clamp(2rem, 5.5vw, 3.2rem); margin: 6px 0 8px; overflow-wrap: anywhere; }
.uc-hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uc-sub { font-size: clamp(1rem, 2.2vw, 1.25rem); font-weight: 600; max-width: 62ch; }
.uc-hero .lead { color: var(--muted); max-width: 70ch; margin-top: 8px; }
.uc-stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0; }
.uc-stats div { display: flex; flex-direction: column; padding: 10px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); min-width: 110px; }
.uc-stats b { font-size: 1.5rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1; }
.uc-stats span { font-size: .78rem; color: var(--muted); }
.uc-search { max-width: 720px; } .uc-search .searchbar { margin-bottom: 0; height: 56px; border-radius: 16px; box-shadow: var(--shadow); }
.uc-hero .m-banner { margin-top: 16px; }
.uc-main { padding: 22px 0 6px; }
.uc-filter { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.uc-fl { flex: none; width: 108px; font-size: .78rem; font-weight: 700; color: var(--muted); padding-top: 9px; text-transform: uppercase; letter-spacing: .04em; }
.uc-filter .chips, .uc-fq .chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; padding-bottom: 0; }
.uc-main .chip { padding: 7px 13px; font-size: .84rem; white-space: normal; text-align: left; max-width: 100%; }
.uc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; flex: none; }
.uc-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.uc-count { font-size: .85rem; color: var(--muted); margin: 0; }
.uc-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.uc-tab { border: 0; background: transparent; padding: 10px 16px; font-weight: 700; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; border-radius: 10px 10px 0 0; }
.uc-tab.on { color: var(--text, inherit); border-bottom-color: var(--brand); }
.uc-grid { display: grid; gap: 16px; }
.uc-left, .uc-panel { min-width: 0; }
.uc-netl { color: var(--muted); font-size: .9rem; margin-bottom: 10px; max-width: 80ch; }
.uc-view { position: relative; height: min(72vh, 540px); min-height: 400px; border-radius: 22px; overflow: hidden; background: radial-gradient(120% 100% at 50% 30%, #1a1d5e 0%, #0e1038 55%, #070820 100%); border: 1px solid #262a6e; touch-action: pan-y; user-select: none; }
.uc-view.m3d { touch-action: none; outline: 2px solid #7fe9ff; }
.uc-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: inherit; }
.uc-view .m-nogl { position: absolute; inset: 0; display: grid; place-items: center; color: #c9cdf8; padding: 24px; text-align: center; }
.uc-lbls { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.uc-cl, .uc-nl { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; }
.uc-cl { font-size: .7rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--c); opacity: .9; text-shadow: 0 0 8px #000, 0 0 3px #000; }
.uc-nl { padding: 2px 8px; border-radius: 99px; font-size: .72rem; font-weight: 600; color: #fff; background: rgba(9, 10, 40, .82); border: 1px solid color-mix(in srgb, var(--c) 70%, transparent); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
.uc-nl.sel { background: var(--c); border-color: #fff; font-weight: 800; z-index: 3; box-shadow: 0 0 18px color-mix(in srgb, var(--c) 80%, transparent); }
.uc-nl.hov { background: #fff; color: #0b0b2b; z-index: 4; }
.uc-ui { position: absolute; z-index: 5; }
.uc-tools { right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.uc-b { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(160, 170, 255, .45); background: rgba(14, 16, 60, .8); color: #fff; font-size: 1.1rem; line-height: 1; }
.uc-b.on { background: var(--grad); border-color: transparent; }
.uc-m3d { display: none; left: 10px; top: 10px; padding: 7px 12px; border-radius: 99px; border: 1px solid rgba(160, 170, 255, .45); background: rgba(14, 16, 60, .8); color: #fff; font-size: .8rem; font-weight: 600; }
.uc-m3d[aria-pressed="true"] { background: var(--grad); border-color: transparent; }
@media (pointer: coarse) { .uc-m3d { display: block; } }
.uc-hint { position: absolute; left: 12px; bottom: 10px; z-index: 5; font-size: .72rem; color: #aab0f0; pointer-events: none; max-width: calc(100% - 24px); }
.uc-panel { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); padding: 18px; box-shadow: var(--shadow); }
.uc-empty h3 { margin-bottom: 8px; } .uc-empty p { color: var(--muted); }
.uc-dh { border-left: 5px solid var(--c); padding-left: 14px; margin-bottom: 8px; }
.uc-dk { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--c); }
.uc-dh h3 { font-size: 1.35rem; margin: 2px 0 4px; overflow-wrap: anywhere; } .uc-ind { color: var(--muted); font-size: .88rem; margin: 0 0 8px; }
.uc-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .uc-act .btn { padding: 8px 14px; font-size: .84rem; }
.uc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.uc-tg { font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: var(--soft); border: 1px solid var(--line); }
.uc-tg.v { background: transparent; } .uc-tg.m1 { background: #e8ecff; color: #3b3bff; } .uc-tg.m2 { background: #e0f4ff; color: #0a6fa8; } .uc-tg.m3 { background: #fff1d6; color: #9a5b00; } .uc-tg.m4 { background: #dcf7e3; color: #17783a; }
.uc-draft { font-size: .78rem; color: var(--muted); background: var(--soft); border-radius: 10px; padding: 8px 12px; margin: 10px 0; }
.uc-s { padding: 12px 0; border-top: 1px solid var(--line); } .uc-s h4 { font-size: .95rem; margin-bottom: 6px; }
.uc-s p { margin: 0 0 6px; overflow-wrap: anywhere; } .uc-s ul { margin: 0; padding-left: 20px; } .uc-s li { margin-bottom: 4px; overflow-wrap: anywhere; }
.uc-sm { font-size: .8rem; color: var(--muted); } .uc-kv { font-size: .88rem; }
.uc-mat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .uc-mat span { text-align: center; font-size: .72rem; padding: 6px 2px; border-radius: 8px; background: var(--soft); color: var(--muted); overflow-wrap: anywhere; } .uc-mat span.on { background: color-mix(in srgb, var(--brand) 22%, var(--soft)); color: inherit; } .uc-mat span.cur { background: var(--brand); color: #fff; font-weight: 800; }
.uc-cd { display: inline-flex; gap: 3px; vertical-align: middle; } .uc-cd i { width: 14px; height: 8px; border-radius: 3px; background: var(--line); } .uc-cd i.on { background: var(--brand); }
.uc-tl, .uc-sim { display: flex; flex-wrap: wrap; gap: 6px; }
.uc-simb { border: 1px solid var(--c); border-left-width: 5px; background: var(--surface); color: inherit; padding: 7px 12px; border-radius: 10px; text-align: left; font-size: .84rem; max-width: 100%; }
.uc-src { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; background: var(--surface); } .uc-src a { font-weight: 700; overflow-wrap: anywhere; } .uc-src p { margin: 6px 0 0; font-size: .88rem; overflow-wrap: anywhere; }
.uc-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.uc-card, .uc-res { display: flex; flex-direction: column; gap: 6px; text-align: left; border: 1px solid var(--line); border-top: 4px solid var(--c); background: var(--surface); color: inherit; border-radius: 16px; padding: 14px; min-width: 0; }
.uc-card:hover, .uc-res:hover, .uc-card.sel { box-shadow: var(--shadow); border-color: var(--c); }
.uc-ck { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--c); } .uc-card b, .uc-res b { overflow-wrap: anywhere; } .uc-cs { font-size: .86rem; color: var(--muted); overflow-wrap: anywhere; }
.uc-none { color: var(--muted); padding: 14px 0; }
.uc-fh p { color: var(--muted); max-width: 70ch; } .uc-fq { margin: 14px 0; } .uc-fq .uc-fl { display: block; width: auto; padding: 0 0 6px; }
.uc-fa { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; } .uc-rh { margin: 14px 0 8px; } #fres { display: grid; gap: 10px; }
.uc-why { font-size: .8rem; font-weight: 700; } .uc-sp { font-size: .84rem; overflow-wrap: anywhere; }
.uc-srcs, .uc-note { padding: 30px 0 6px; } .uc-h h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); } .uc-h p { color: var(--muted); max-width: 72ch; margin-top: 6px; }
.uc-sgrid { display: grid; gap: 10px; margin-top: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); } .uc-note { padding-bottom: 40px; } .uc-note p { color: var(--muted); font-size: .85rem; max-width: 80ch; }
@media (min-width: 900px) { .uc-grid { grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr); align-items: start; } .uc-view { height: 620px; max-height: none; } .uc-panel { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; } }
@media (max-width: 640px) { .uc-filter { flex-direction: column; gap: 4px; } .uc-fl { width: auto; padding-top: 0; } .uc-view { height: min(74vh, 560px); } .uc-nl { font-size: .66rem; } .uc-cl { font-size: .6rem; } }
@media (prefers-reduced-motion: reduce) { .uc-card, .uc-res { transition: none; } }