/* App-Tour */
.thead{padding:46px 0 12px}
.thead h1{font-size:clamp(30px,4.2vw,50px)}
.ttools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0 4px;position:relative}
.ttools input{flex:1;min-width:220px;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--txt);padding:10px 14px;font:inherit;font-size:15px}
.ttools .btn{padding:9px 14px;font-size:14px}
.ttools .btn.on{border-color:var(--orange);color:var(--orange)}
#tSearchRes{position:absolute;top:48px;left:0;z-index:30;width:min(520px,100%);max-height:420px;overflow:auto;background:var(--panel2);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
#tSearchRes:empty{display:none}
#tSearchRes button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);color:var(--txt);padding:10px 14px;cursor:pointer;font:inherit}
#tSearchRes button:hover{background:rgba(167,110,255,.12)}
#tSearchRes b{display:block;font-size:14.5px} #tSearchRes span{font-size:12.5px;color:var(--dim)}
#tSearchRes p{padding:12px 14px;margin:0}

.tmodes{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 10px}
.tmodes button{background:var(--panel);border:1px solid var(--line);color:var(--dim);padding:9px 15px;border-radius:10px;font:600 14.5px/1 inherit;cursor:pointer;display:flex;gap:8px;align-items:center}
.tmodes button i{font-style:normal;opacity:.8}
.tmodes button.on{background:linear-gradient(135deg,var(--violet2),var(--violet));border-color:var(--violet);color:#fff}
.tviews{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tviews button{background:transparent;border:1px solid var(--line);color:var(--dim);padding:6px 12px;border-radius:999px;font:13.5px/1.2 inherit;cursor:pointer}
.tviews button.on{border-color:var(--cyan);color:var(--cyan);background:rgba(46,196,214,.08)}

.tstage{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
body.bigshot .tstage{grid-template-columns:1fr}
body.bigshot .tside{position:static}
.twin{background:#000;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.tbar{height:26px;background:#1d1830;display:flex;align-items:center;gap:7px;padding:0 10px}
.tbar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.tbar i:nth-child(2){background:#febc2e}.tbar i:nth-child(3){background:#28c840}
.tbar span{color:var(--dim);font-size:12px;margin-left:8px}
.tshot{position:relative;width:100%;line-height:0;background:#0b0816}
.tshot img{width:100%;height:100%;display:block}
.tshot.tall{max-width:620px;margin:auto}
.hs{position:absolute;padding:0;margin:0;background:transparent;border:2px solid transparent;border-radius:5px;cursor:pointer;transition:background .12s,border-color .12s;z-index:2}
.hs:hover,.hs.sel,.tshot.all .hs{border-color:var(--orange);background:rgba(255,159,67,.14)}
.tshot.all .hs{border-style:dashed;border-color:rgba(255,159,67,.7)}
.hs.sel{box-shadow:0 0 0 4000px rgba(5,3,12,.58);z-index:4;border-style:solid}
.hs .lb{position:absolute;left:-2px;bottom:calc(100% + 4px);background:var(--orange);color:#1b1030;font:700 12px/1.2 -apple-system,system-ui,sans-serif;padding:4px 8px;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;max-width:340px;overflow:hidden;text-overflow:ellipsis}
.hs.lb-below .lb{bottom:auto;top:calc(100% + 4px)}
.hs.lb-right .lb{left:auto;right:-2px}
.hs:hover .lb,.hs.sel .lb{opacity:1;z-index:6}
.tshot.all .hs .lb{opacity:0}
.mark{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--orange);color:#1b1030;font:800 16px/34px -apple-system,system-ui,sans-serif;text-align:center;z-index:7;pointer-events:none;animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,159,67,.75)}100%{box-shadow:0 0 0 22px rgba(255,159,67,0)}}

.tside{position:sticky;top:80px;display:grid;gap:14px}
.tinfo{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;min-height:260px}
.tinfo .k{color:var(--orange);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tinfo h3{margin:6px 0 10px;font-size:21px}
.tinfo p{color:#d0cae6;font-size:15px}
.tinfo .hint{color:var(--dim);font-size:13.5px}
.tinfo h5{margin:14px 0 6px;font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.tinfo ol{margin:0;padding-left:20px;color:#d0cae6;font-size:14.5px} .tinfo li{margin-bottom:4px}
.keys{display:flex;flex-wrap:wrap;gap:6px}
kbd{font:600 12.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:#0f0b1d;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:5px 8px;color:var(--txt)}
.golink{margin-top:16px;width:100%;text-align:left;background:rgba(46,196,214,.1);border:1px solid rgba(46,196,214,.35);color:var(--cyan);border-radius:10px;padding:10px 12px;font:600 14px/1.3 inherit;cursor:pointer}
.golink:hover{background:rgba(46,196,214,.18)}
.tnav{display:flex;gap:8px;margin-top:16px}
.tnav button{flex:1;background:#0f0b1d;border:1px solid var(--line);color:var(--txt);padding:10px;border-radius:9px;font:600 14px/1 inherit;cursor:pointer}
.tnav button.go{background:var(--orange);border-color:var(--orange);color:#1b1030}
.tnav button:disabled{opacity:.4}
.endtut{margin-top:10px;background:none;border:0;color:var(--dim);font:13px/1 inherit;cursor:pointer;padding:0}
.tlist{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;max-height:340px;overflow:auto}
.tlist h4{margin:0 0 8px;font-size:12.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.tlist button{display:block;width:100%;text-align:left;background:none;border:0;color:#cfc9e4;padding:6px 8px;border-radius:7px;font:14px/1.3 inherit;cursor:pointer}
.tlist button:hover,.tlist button.on{background:rgba(255,159,67,.12);color:#fff}
body.tutorial .tlist{display:none}

.tuts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.tutcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column}
.tutcard .n{font-size:12px;color:var(--orange);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.tutcard h4{margin:6px 0 6px;font-size:17px}
.tutcard p{color:#cbc5e2;font-size:14px;flex:1}
.tutcard .btn{align-self:flex-start}

@media(max-width:1100px){.tstage{grid-template-columns:1fr}.tside{position:static}.tuts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.tuts{grid-template-columns:1fr}.hs .lb{display:none}}
.tshot{overflow:hidden}
.tshot img{position:absolute;max-width:none;height:auto}
.tfull{margin-left:auto;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--txt);border-radius:7px;padding:2px 9px;font:600 12px/1.4 inherit;cursor:pointer}
.tfull:hover{border-color:var(--cyan);color:var(--cyan)}
body.bigshot .wrap.tw{max-width:1640px}
/* Reiter/Knöpfe, die direkt eine andere Ansicht öffnen */
.hs.hsnav:hover{border-color:#3ec9d0;background:rgba(62,201,208,.18)}
.hs.hsnav .lb{background:#3ec9d0}
.tshot.all .hs.hsnav{border-color:rgba(62,201,208,.8)}
.hs.hsnav.cur{cursor:default}
.hs.hsnav.cur:hover{border-color:rgba(62,201,208,.6);background:transparent}
.hs:hover{z-index:5}
.tmore{display:block;width:100%;margin:12px 0 0;background:rgba(62,201,208,.12);border:1px solid #3ec9d0;color:#3ec9d0;padding:9px 12px;border-radius:9px;font:600 13.5px/1.3 inherit;text-align:left;cursor:pointer}
.tmore:hover{background:rgba(62,201,208,.22)}
.tutgrp{grid-column:1/-1;margin:26px 0 2px;font-size:20px;color:#fff;border-bottom:1px solid var(--line);padding-bottom:8px}
.tutgrp:first-child{margin-top:0}