/* Beitrag „Wo steckt die Zeit?“ – Query Store und verschachtelte Aufrufe (Entwurf unter /_dev/) */

.qv-hero h1{max-width:12em}
.qv-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.qv-pill{display:inline-flex;gap:8px;align-items:center;font-family:var(--mono);font-size:.78rem;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:#d4e6f3;text-decoration:none;background:rgba(255,255,255,.04)}
.qv-pill b{font-weight:500;color:#7fa3bd;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem}
a.qv-pill:hover{border-color:var(--orange);color:#fff}

.qv-head{max-width:860px;margin-bottom:28px}
.qv-head h2{font-size:clamp(2rem,3.6vw,3.2rem)}
.qv-zeit .lead{color:#b9cddb}
.qv-chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--mono);font-size:.9rem;margin:6px 0 22px}
.qv-chain span{padding:6px 12px;border-radius:8px;background:var(--blue-50);border:1px solid var(--line)}
.qv-chain span:last-child{border-color:var(--orange);background:var(--orange-100)}
.qv-chain i{font-style:normal;color:var(--orange-600)}
.qv-tw{overflow-x:auto;margin:6px 0 20px}
.qv-tw .table td.n,.qv-tw .table th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.qv-tw tr.qv-ref td{border-top:2px dashed var(--orange)}
.qv-fine{font-size:.85rem;color:var(--muted);margin:14px 0 0}
.qv-zeit .qv-fine{color:#7fa3bd}

/* Fallauswahl (dunkel) */
.qv-cases{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.qv-cases button{font:600 .9rem var(--text);padding:10px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#d4e6f3;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.qv-cases button:hover{border-color:var(--orange);color:#fff}
.qv-cases button[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#fff}

/* Zeitraffer */
.qv-board{--name:250px;--clock:150px;--gap:18px;background:#03131f;border-radius:var(--radius);padding:18px 22px 16px;box-shadow:0 30px 70px rgba(0,0,0,.3)}
.qv-board-head{display:grid;grid-template-columns:var(--name) 1fr var(--clock);column-gap:var(--gap);font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#7fa3bd;padding:0 0 10px;border-bottom:1px solid rgba(255,255,255,.08)}
.qv-board-head span:last-child{text-align:right}
.qv-lanes{position:relative;padding:8px 0 4px}
.qv-lane{display:grid;grid-template-columns:var(--name) 1fr var(--clock);column-gap:var(--gap);align-items:center;min-height:46px}
.qv-name{min-width:0;padding-left:calc(var(--d,0) * 16px);position:relative}
.qv-name b{display:block;font-family:var(--mono);font-size:.8rem;font-weight:600;color:#e6f0f7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qv-name small{display:block;font-size:.72rem;color:#7fa3bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qv-name::before{content:"";position:absolute;left:calc(var(--d,0) * 16px - 10px);top:4px;bottom:50%;width:7px;border-left:1px solid #2a4659;border-bottom:1px solid #2a4659;border-bottom-left-radius:4px;display:var(--zweig,block)}
.qv-lane.wurzel .qv-name::before{display:none}
.qv-track{position:relative;height:26px;border-radius:6px;background:rgba(255,255,255,.035)}
.qv-bar,.qv-ghost{position:absolute;top:0;bottom:0;border-radius:5px}
.qv-ghost{border:1px dashed rgba(255,255,255,.16)}
.qv-bar{width:0;background:#5fa7d6;overflow:hidden;min-width:0}
.qv-bar.on{min-width:4px}
.qv-lane.modul .qv-bar{background:transparent;border:1.5px solid #9fb7c8;top:7px;bottom:7px;opacity:.75}
.qv-lane.ohne .qv-bar{background:repeating-linear-gradient(135deg,rgba(240,125,26,.18) 0 6px,rgba(240,125,26,.04) 6px 12px);border:1.5px dashed var(--orange)}
.qv-wait{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,rgba(240,125,26,.85) 0 6px,rgba(240,125,26,.55) 6px 12px)}
.qv-lane.ohne .qv-wait{display:none}
.qv-lane.ohne .qv-name b{color:#f7b27a}
.qv-bar em{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-style:normal;font-family:var(--mono);font-size:.68rem;color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.qv-lane.modul .qv-bar em{color:#cfe0ec;left:8px;font-size:.64rem}
.qv-clock{text-align:right;font-family:var(--mono);font-size:.86rem;color:#4d6b80;font-variant-numeric:tabular-nums;white-space:nowrap}
.qv-clock.lauf{color:#fff}
.qv-clock.lauf::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);margin-right:8px;vertical-align:1px;animation:qv-puls .8s ease-in-out infinite}
.qv-clock.fertig{color:#7fd1a8}
.qv-clock.fertig.qs::after{content:" ✓";color:#7fd1a8}
.qv-clock.leer{color:#f7b27a;font-size:.76rem}
.qv-clock.mod{color:#9fb7c8;font-size:.76rem}
.qv-clock small{display:block;font-size:.68rem;color:#7fa3bd}
@keyframes qv-puls{50%{opacity:.25}}
.qv-head-line{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--orange);box-shadow:0 0 12px rgba(240,125,26,.7);pointer-events:none;left:calc(var(--name) + var(--gap) + (100% - var(--name) - var(--clock) - 2 * var(--gap)) * var(--p,0))}
.qv-head-line[hidden]{display:none}
.qv-ticks{position:relative;height:20px;margin-left:calc(var(--name) + var(--gap));margin-right:calc(var(--clock) + var(--gap));border-top:1px solid rgba(255,255,255,.08)}
.qv-ticks span{position:absolute;top:4px;transform:translateX(-50%);font-family:var(--mono);font-size:.66rem;color:#7fa3bd}
.qv-transport{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.qv-play{width:42px;height:42px;border-radius:50%;border:0;background:var(--orange);color:#fff;font-size:1rem;cursor:pointer;flex:none;display:grid;place-items:center}
.qv-play:hover{background:var(--orange-600)}
#qv-scrub{flex:1;min-width:160px;accent-color:var(--orange);cursor:pointer}
.qv-time{font-family:var(--mono);font-size:.86rem;color:#fff;min-width:4.5em;font-variant-numeric:tabular-nums}
.qv-toggle{display:inline-flex;gap:8px;align-items:center;cursor:pointer;color:#9fb7c8;font-size:.86rem}
.qv-toggle input{accent-color:var(--orange);margin:0}
.qv-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:.76rem;color:#9fb7c8}
.qv-legend span{display:inline-flex;align-items:center;gap:7px}
.qv-legend i{width:22px;height:11px;border-radius:3px;display:inline-block}
.qv-legend .l-qs{background:#5fa7d6}
.qv-legend .l-wait{background:repeating-linear-gradient(135deg,rgba(240,125,26,.85) 0 4px,rgba(240,125,26,.55) 4px 8px)}
.qv-legend .l-none{border:1.5px dashed var(--orange);background:rgba(240,125,26,.1)}
.qv-legend .l-mod{border:1.5px solid #9fb7c8;height:8px}
.qv-verdict{margin:22px 0 0;max-width:54em;font-size:1.12rem;color:#d4e6f3;min-height:3.4em;transition:opacity .4s}
.qv-verdict b{color:#fff}
.qv-verdict.aus{opacity:0}
.qv-lane .dmv{display:none}
.qv-board.mit-dmv .qv-lane .dmv{display:block}

/* Reports (hell) */
.qv-reports{background:var(--blue-50)}
.qv-rep-ctrl{display:flex;flex-wrap:wrap;gap:12px 22px;margin-bottom:22px}
.qv-seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.qv-seg button{font:600 .88rem var(--text);padding:9px 16px;border-radius:999px;border:0;background:transparent;color:var(--ink-2);cursor:pointer;transition:background .25s,color .25s}
.qv-seg button:hover{color:var(--blue)}
.qv-seg button[aria-pressed="true"]{background:var(--navy);color:#fff}
.qv-rep{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;box-shadow:0 20px 50px rgba(5,28,44,.08)}
.qv-rep-title{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.qv-row{display:grid;grid-template-columns:28px minmax(0,280px) 1fr 140px;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--blue-50)}
.qv-row:last-child{border-bottom:0}
.qv-rank{font-family:var(--mono);font-size:.8rem;color:var(--muted);text-align:right}
.qv-lbl b{display:block;font-family:var(--mono);font-size:.82rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qv-lbl small{display:block;font-size:.76rem;color:var(--muted)}
.qv-rt{position:relative;height:22px;border-radius:6px;background:var(--blue-50)}
.qv-rt i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;transition:width .7s var(--ease)}
.qv-rt .gh{border:1.5px dashed var(--ink-2);background:rgba(5,28,44,.04)}
.qv-rt .va{background:var(--blue);top:4px;bottom:4px;min-width:3px}
.qv-row.dop .qv-rt .va{background:#e5533f}
.qv-row.wahr .qv-rt .va{background:#2f9e6e}
.qv-row.wenig .qv-rt .va{background:var(--orange)}
.qv-val{font-family:var(--mono);font-size:.86rem;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.qv-val small{display:block;font-size:.72rem;color:var(--muted)}
.qv-rep-note{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:.78rem;color:var(--muted)}
.qv-rep-note i{display:inline-block;width:20px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.qv-rep-verdict{margin:22px 0 0;max-width:54em;font-size:1.12rem;color:var(--ink)}

/* Ratespiel */
.qv-quiz-sec{padding-top:0}
.qv-quiz{background:var(--navy);color:#e6f0f7;border-radius:var(--radius);padding:28px 32px 30px;box-shadow:0 30px 70px rgba(5,28,44,.25)}
.qv-quiz .eyebrow{color:#9ccbea;margin-bottom:0}
.qv-q-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.qv-dots{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.qv-dots li{width:26px;height:6px;border-radius:3px;background:rgba(255,255,255,.15)}
.qv-dots li.akt{background:#9ccbea}
.qv-dots li.ok{background:#7fd1a8}
.qv-dots li.nein{background:#e5533f}
.qv-q-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:start}
.qv-q-n{font-family:var(--mono);font-size:.78rem;color:#7fa3bd}
.qv-q h3{color:#fff;margin:4px 0 10px;font-size:clamp(1.4rem,2.2vw,1.9rem)}
.qv-q p{color:#b9cddb;margin:0 0 12px}
.qv-q .code{margin:0}
.qv-q .code pre{background:#03131f}
.qv-frage{font-family:var(--display);font-weight:600;font-size:1.25rem;color:#fff;margin:0 0 14px}
.qv-opts{display:flex;flex-direction:column;gap:10px}
.qv-opts button{display:flex;gap:14px;align-items:flex-start;text-align:left;font:500 .98rem var(--text);padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);color:#e6f0f7;cursor:pointer;transition:border-color .2s,background .2s}
.qv-opts button:hover:not(:disabled){border-color:var(--orange);background:rgba(240,125,26,.08)}
.qv-opts button b{display:block;font-weight:650;color:#fff}
.qv-opts button small{display:block;color:#9fb7c8;font-size:.82rem;margin-top:2px}
.qv-opts button .k{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;font-family:var(--mono);font-size:.78rem}
.qv-opts button:disabled{cursor:default}
.qv-opts button.richtig{border-color:#7fd1a8;background:rgba(127,209,168,.12)}
.qv-opts button.richtig .k{background:#7fd1a8;border-color:#7fd1a8;color:var(--navy)}
.qv-opts button.falsch{border-color:#e5533f;background:rgba(229,83,63,.12)}
.qv-opts button.falsch .k{background:#e5533f;border-color:#e5533f;color:#fff}
.qv-opts button.blass{opacity:.45}
.qv-aufl{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);animation:qv-ein .5s var(--ease)}
.qv-aufl .qv-board{--name:210px;--clock:120px;box-shadow:none;padding:12px 16px 10px;background:#03131f}
.qv-aufl p{color:#d4e6f3;max-width:60em;margin:16px 0 0}
.qv-aufl p b{color:#fff}
.qv-next{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.qv-ende h3{color:#fff;font-size:clamp(1.6rem,3vw,2.4rem)}
.qv-ende p{color:#b9cddb;max-width:52em}
.qv-score{font-family:var(--display);font-size:clamp(3rem,7vw,5rem);font-weight:600;color:var(--orange);line-height:1;margin:6px 0 10px}
@keyframes qv-ein{from{opacity:0;transform:translateY(8px)}}

.qv-all{margin:18px 0 22px}
.qv-all summary{cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:650;color:var(--blue);padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;list-style:none;margin-bottom:12px}
.qv-all summary::-webkit-details-marker{display:none}
.qv-all summary::before{content:"+";font-family:var(--mono);color:var(--orange)}
.qv-all[open] summary::before{content:"–"}
.qv-sum-table td:first-child{min-width:16em}
.qv-tag{display:inline-block;font-family:var(--mono);font-size:.74rem;padding:3px 10px;border-radius:999px;white-space:nowrap}
.qv-tag.dop{background:#fde3df;color:#a8321f}
.qv-tag.ein{background:var(--blue-100);color:var(--blue-700)}
.qv-tag.fehlt{background:var(--orange-100);color:#9a4a06}

@media (max-width:900px){
  .qv-q-grid{grid-template-columns:minmax(0,1fr)}
  .qv-row{grid-template-columns:22px minmax(0,1fr) 110px;grid-template-areas:"r l v" ". t t"}
  .qv-rank{grid-area:r}.qv-lbl{grid-area:l}.qv-val{grid-area:v}.qv-rt{grid-area:t}
  .qv-quiz{padding:22px 18px 24px}
}
@media (max-width:700px){
  .qv-board,.qv-aufl .qv-board{--name:0px;--clock:0px;--gap:0px;padding:14px 12px 12px}
  .qv-board-head{display:none}
  .qv-lane{grid-template-columns:1fr auto;grid-template-areas:"n c" "t t";row-gap:4px;padding:6px 0}
  .qv-name{grid-area:n}.qv-clock{grid-area:c}.qv-track{grid-area:t}
  .qv-name{padding-left:calc(var(--d,0) * 10px)}
  .qv-name::before{display:none}
  .qv-head-line{display:none}
  .qv-ticks{margin:0}
  .qv-seg{border-radius:18px}
}
@media (prefers-reduced-motion: reduce){
  .qv-clock.lauf::before{animation:none}
  .qv-rt i{transition:none}
}

/* Doppel-Uhr im Kopf */
.qv-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:center}
.qv-uhren{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.qv-uhr{display:flex;flex-direction:column;align-items:center;text-align:center}
.qv-uhr svg{width:100%;max-width:210px;overflow:visible}
.qv-uhr .ring{fill:#03131f;stroke:rgba(255,255,255,.18);stroke-width:2}
.qv-uhr .krone{fill:#9fb7c8}
.qv-uhr .ticks line{stroke:#7fa3bd;stroke-width:2;stroke-linecap:round}
.qv-uhr .spur{fill:none;stroke:rgba(255,255,255,.06);stroke-width:8}
.qv-uhr .bogen{fill:none;stroke:#5fa7d6;stroke-width:8;stroke-linecap:round;transform:rotate(-90deg);transform-origin:60px 66px}
.qv-uhr.innen .bogen{stroke:var(--orange)}
.qv-uhr .zeiger{stroke:#fff;stroke-width:3;stroke-linecap:round}
.qv-uhr .nabe{fill:#fff}
.qv-uhr-wert{display:block;margin-top:10px;font-family:var(--mono);font-size:1.25rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.qv-uhr small{display:block;font-family:var(--mono);font-size:.72rem;color:#9fb7c8;margin-top:2px}
.qv-uhr small i{font-style:normal;color:#7fa3bd}
.qv-uhren-summe{grid-column:1 / -1;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 22px;font-family:var(--mono);font-size:.86rem;color:#9fb7c8;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);opacity:0;transform:translateY(6px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.qv-uhren-summe b{color:#fff;font-weight:600}
.qv-uhren-summe .ne b{color:#f7b27a}
.qv-uhren.fertig .qv-uhren-summe{opacity:1;transform:none}
.qv-uhren-hint{grid-column:1 / -1;text-align:center;font-size:.74rem;color:#5d7c91;margin-top:-6px}
@media (max-width:900px){
  .qv-hero-grid{grid-template-columns:1fr;gap:28px}
  .qv-uhren{max-width:440px}
  .qv-uhr-wert{font-size:1.05rem}
}
@media (prefers-reduced-motion: reduce){.qv-uhren-summe{transition:none}}