/* PFS 3D-Qualitätsrundgang – isolierte Stile (Präfix qm-) */
.qm{position:relative;border-radius:22px;overflow:hidden;background:#1d2023;color:#fff;box-shadow:0 30px 70px -30px rgb(0 0 0/.55);isolation:isolate}
.qm{scroll-margin-top:118px}
.qm-stage{position:relative;height:min(740px,calc(100vh - 210px));height:min(740px,calc(100svh - 210px));min-height:420px}
.qm-stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 85% 80% at 50% 45%,transparent 60%,rgb(10 12 14/.28) 100%)}
.qm-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;filter:saturate(1.18) contrast(1.04)}
.qm-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.qm-lines line{stroke-width:1.5;transition:opacity .25s}
.qm-labels,.qm-dots{position:absolute;inset:0;z-index:3;pointer-events:none}
.qm-pt{position:absolute;inset:0;transition:opacity .3s}
.qm-dot{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px #fff,0 4px 12px rgb(0 0 0/.35)}
.qm-dot::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--c);opacity:.55;animation:qmpulse 2.2s ease-out infinite}
.qm-pt.floor .qm-dot{border-radius:4px}
@keyframes qmpulse{from{transform:scale(.6);opacity:.7}to{transform:scale(1.25);opacity:0}}
.qm-lbl{position:absolute;left:0;top:0;max-width:300px;padding:10px 14px 11px;border-radius:12px;background:rgb(255 255 255/.97);color:#25292c;border-left:4px solid var(--c);box-shadow:0 14px 34px -12px rgb(0 0 0/.45);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.qm-lbl b,.qm-card b{display:block;font-size:.98rem;font-weight:650;line-height:1.3;letter-spacing:-.005em}
.qm-lbl small,.qm-card small{display:block;margin-top:3px;font-size:.78rem;line-height:1.35;color:#5c656a}
.qm-tag{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:.68rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:#5c656a}
.qm-tag i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.qm-tag svg{width:14px;height:14px;color:var(--c)}
.qm-title{position:absolute;left:28px;top:24px;z-index:4;max-width:min(520px,80%);opacity:0;transform:translateY(-6px);transition:opacity .6s,transform .6s cubic-bezier(.22,1,.36,1);pointer-events:none;text-shadow:0 2px 14px rgb(0 0 0/.35)}
.qm-title.on{opacity:1;transform:none}
.qm-title b{display:block;font-size:clamp(1.15rem,.9rem + 1vw,1.6rem);font-weight:700;letter-spacing:-.01em}
.qm-title span{display:block;margin-top:4px;font-size:.92rem;color:rgb(255 255 255/.86)}
.qm-touring .qm-title b,.qm-touring .qm-title span{display:inline-block;padding:4px 12px;border-radius:8px;background:rgb(29 32 35/.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.qm-touring .qm-title span{margin-top:6px}
.qm-fade{position:absolute;inset:0;z-index:6;background:#1d2023;opacity:0;pointer-events:none;transition:opacity .28s}
.qm-fade.on{opacity:1}
.qm-load{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#1d2023;color:rgb(255 255 255/.85);font-size:.95rem;text-align:center;padding:24px;transition:opacity .6s}
.qm-load.done{opacity:0;pointer-events:none}
.qm-load i{width:38px;height:38px;border-radius:50%;border:3px solid rgb(89 195 161/.25);border-top-color:#59c3a1;animation:qmspin .9s linear infinite}
@keyframes qmspin{to{transform:rotate(360deg)}}
.qm-intro,.qm-end{position:absolute;z-index:5;left:0;right:0;bottom:0;padding:clamp(24px,4vw,48px);background:linear-gradient(0deg,rgb(20 23 25/.92) 0%,rgb(20 23 25/.7) 55%,transparent 100%)}
.qm-intro>*,.qm-end>*{max-width:620px}
.qm-end{top:0;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(0deg,rgb(20 23 25/.94) 0%,rgb(20 23 25/.72) 50%,rgb(20 23 25/.15) 100%)}
.qm-eyebrow{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#59c3a1}
.qm-intro h2,.qm-end h2{margin:10px 0 0;font-size:clamp(1.8rem,1.3rem + 2.4vw,3.2rem);font-weight:750;letter-spacing:-.025em;line-height:1.04;color:#fff}
.qm-lead{margin:14px 0 0;font-size:clamp(.98rem,.92rem + .3vw,1.12rem);line-height:1.6;color:rgb(255 255 255/.82)}
.qm-btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;margin-top:22px;padding:0 24px;border-radius:999px;border:1px solid transparent;font:inherit;font-size:.98rem;font-weight:650;text-decoration:none;cursor:pointer;transition:transform .2s cubic-bezier(.22,1,.36,1),background .2s,box-shadow .2s}
.qm-btn svg{width:20px;height:20px}
.qm-primary{background:#59c3a1;color:#1d2023;box-shadow:0 14px 30px -12px rgb(89 195 161/.8)}
.qm-primary:hover{background:#6fd3b2;transform:translateY(-1px)}
.qm-ghost{background:transparent;color:#fff;border-color:rgb(255 255 255/.32)}
.qm-ghost:hover{border-color:#fff}
.qm-endact{display:flex;flex-wrap:wrap;gap:12px;max-width:none!important}
.qm-legend{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;margin:18px 0 0;padding:0;font-size:.85rem;color:rgb(255 255 255/.85);max-width:760px!important}
.qm-legend li{display:flex;align-items:center;gap:8px}
.qm-legend i{width:12px;height:12px;border-radius:50%}
.qm-legend svg{width:16px;height:16px;color:#c084fc}
.qm-ui{position:relative;z-index:5;background:#25292c;border-top:1px solid rgb(255 255 255/.08);padding:0 14px 12px}
.qm-prog{position:relative;height:4px;margin:0 -14px 10px;background:rgb(255 255 255/.12)}
.qm-prog i{position:absolute;left:0;top:0;bottom:0;background:#59c3a1;width:0}
.qm-prog b{position:absolute;top:-3px;width:2px;height:10px;background:rgb(255 255 255/.45)}
.qm-row{display:flex;align-items:center;gap:8px}
.qm-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;border:1px solid rgb(255 255 255/.14);background:rgb(255 255 255/.04);color:#fff;cursor:pointer;transition:background .2s,border-color .2s}
.qm-ic:hover{background:rgb(255 255 255/.1)}
.qm-ic svg{width:20px;height:20px}
.qm-ic[data-qm="toggle"]{background:#59c3a1;border-color:#59c3a1;color:#1d2023}
.qm-rooms{display:flex;gap:6px;flex:1;overflow-x:auto;scrollbar-width:none;margin:0 6px}
.qm-rooms::-webkit-scrollbar{display:none}
.qm-rooms button{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid rgb(255 255 255/.12);background:transparent;color:rgb(255 255 255/.78);font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.qm-rooms button b{font-size:.72rem;color:#59c3a1;letter-spacing:.06em}
.qm-rooms button:hover{color:#fff;border-color:rgb(255 255 255/.3)}
.qm-rooms button.on{background:rgb(89 195 161/.16);border-color:rgb(89 195 161/.6);color:#fff}
.qm :focus-visible{outline:2px solid #59c3a1;outline-offset:2px}
.qm-pdot{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;border:0;padding:0;background:transparent;cursor:pointer;pointer-events:auto}
.qm-pdot::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px #fff,0 4px 10px rgb(0 0 0/.4);transition:transform .2s}
.qm-pdot:hover::before,.qm-pdot:focus-visible::before{transform:scale(1.25)}
.qm-card{position:absolute;z-index:6;right:16px;top:16px;width:min(320px,calc(100% - 32px));padding:14px 40px 14px 16px;border-radius:14px;background:#fff;color:#25292c;border-left:4px solid var(--c);box-shadow:0 18px 40px -14px rgb(0 0 0/.5)}
.qm-x{position:absolute;right:6px;top:6px;width:32px;height:32px;border:0;border-radius:8px;background:transparent;font-size:1.4rem;line-height:1;color:#5c656a;cursor:pointer}
.qm-paused .qm-stage::after{content:"Pausiert – Kontrollpunkte antippen";position:absolute;left:50%;bottom:14px;z-index:4;transform:translateX(-50%);padding:6px 12px;border-radius:999px;background:rgb(29 32 35/.75);font-size:.8rem;color:rgb(255 255 255/.85);pointer-events:none;white-space:nowrap}
.qm-full{position:fixed!important;inset:0;z-index:2000;border-radius:0;display:flex;flex-direction:column}
.qm-full .qm-stage{flex:1;height:auto;min-height:0}
.qm:fullscreen{display:flex;flex-direction:column;border-radius:0}
.qm:fullscreen .qm-stage{flex:1;height:auto}
html.qm-lock,html.qm-lock body{overflow:hidden}
.qm-nogl .qm-stage{height:auto;min-height:0}
.qm-nogl .qm-load{position:relative;min-height:160px}
.qm-nogl .qm-intro{position:relative;background:none}
/* Seite */
.qm-sec .qm-head{max-width:46rem;margin-bottom:32px}
.qm-legendbar{display:grid;gap:14px;margin-top:28px;padding:0;list-style:none}
.qm-legendbar li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line,#dde2e0);border-radius:14px;background:#fff}
.qm-legendbar i{flex:none;width:14px;height:14px;margin-top:4px;border-radius:50%}
.qm-legendbar svg{flex:none;width:18px;height:18px;margin-top:2px;color:#64748b}
.qm-legendbar b{display:block;font-weight:650}
.qm-legendbar span{display:block;margin-top:2px;font-size:.9rem;color:var(--muted,#5c656a);line-height:1.5}
.qm-principles{display:grid;gap:16px;list-style:none;margin:0;padding:0;counter-reset:qp}
.qm-principles li{position:relative;padding:18px 18px 18px 58px;border-radius:14px;background:var(--paper,#f6f8f7);counter-increment:qp;line-height:1.55}
.qm-principles li::before{content:counter(qp);position:absolute;left:18px;top:16px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#25292c;color:#59c3a1;font-weight:700;font-size:.85rem}
.qm-principles b{display:block}
.qm-list{margin-top:28px;border:1px solid var(--line,#dde2e0);border-radius:14px;background:#fff}
.qm-list summary{padding:16px 18px;font-weight:650;cursor:pointer}
.qm-list .in{display:grid;gap:22px;padding:0 18px 20px}
.qm-list h3{margin:0 0 8px;font-size:1rem}
.qm-list ol{margin:0;padding-left:1.2rem;display:grid;gap:4px;font-size:.92rem;line-height:1.5}
.qm-list li::marker{color:var(--c)}
.qm-list li span{color:var(--muted,#5c656a);font-size:.84rem}
@media(min-width:900px){.qm-legendbar{grid-template-columns:repeat(5,1fr)}.qm-principles{grid-template-columns:repeat(2,1fr)}.qm-list .in{grid-template-columns:repeat(2,1fr)}}
@media(max-width:699px){
 .qm{border-radius:16px;margin-inline:-4px}
 .qm{scroll-margin-top:80px}
 .qm-stage{height:calc(100vh - 175px);height:calc(100svh - 175px);min-height:400px}
 .qm-title{left:16px;top:16px;max-width:calc(100% - 32px)}
 .qm-title span{font-size:.82rem}
 .qm-lbl{max-width:calc(100vw - 64px)}
 .qm-rooms button{padding:0 10px;font-size:.8rem}
 .qm-ui{padding:0 10px 10px}
 .qm-ic{width:42px;height:42px}
 .qm-intro,.qm-end{padding:22px}
}
@media(prefers-reduced-motion:reduce){.qm-dot::after,.qm-load i{animation:none}.qm-title,.qm-lbl,.qm-pt{transition:none}}

/* Schwebenden Angebots-Button ausblenden, solange der Rundgang läuft */
html.qm-active #fab{opacity:0!important;pointer-events:none!important;transform:translateY(20px)}
.qm-pt.screen .qm-dot{display:none}
.qm-pt.screen .qm-lbl{max-width:360px;padding:14px 18px 15px;border-left-width:5px}
.qm-pt.screen .qm-lbl b{font-size:1.08rem}
.qm-tag svg{flex:none}
