/* ==========================================================
   EINWEISUNG — angedocktes PDA-Panel
   ========================================================== */
:root{ --tut-w:388px; --tut-top:92px; }

/* Vignette: reine Optik. pointer-events:none, damit die Seite
   dahinter voll bedienbar bleibt. */
.tut-vig{
  position:fixed; inset:0; z-index:9300;
  pointer-events:none;
  background:radial-gradient(ellipse 130% 100% at 50% 40%,
    transparent 45%, rgba(0,0,0,.30) 85%, rgba(0,0,0,.5) 100%);
  opacity:0; transition:opacity .3s;
  animation:tutVigIn .5s forwards;
}
@keyframes tutVigIn{ to{ opacity:1 } }
.tut-vig.out{ opacity:0 }

.tut-panel{
  position:fixed; z-index:9400;
  top:var(--tut-top); right:14px;
  width:var(--tut-w); max-width:calc(100vw - 28px);
  max-height:calc(100vh - var(--tut-top) - 20px);
  display:flex; flex-direction:column;
  background:linear-gradient(160deg,#15100c 0%,#0c0a08 100%);
  border:2px solid #4a3828; border-radius:3px;
  box-shadow:inset 0 0 30px rgba(0,0,0,.8), 0 18px 50px rgba(0,0,0,.7);
  transform:translateX(24px) scale(.98); opacity:0;
  transition:transform .26s cubic-bezier(.2,.7,.3,1), opacity .26s, filter .25s;
}
.tut-panel.left{ right:auto; left:14px; transform:translateX(-24px) scale(.98) }
.tut-panel.open{ transform:none; opacity:1 }
.tut-panel::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--acc),var(--gold),var(--acc));
  z-index:3;
}
/* Blass, solange die Maus weg ist — der Blick soll auf der Seite
   liegen, nicht auf der Erklärung. */
.tut-panel{ filter:none }
@media (hover:hover){
  .tut-panel:not(:hover):not(:focus-within){ opacity:.93 }
}
.tut-panel.collapsed{ max-height:none }
.tut-panel.collapsed .tut-body,
.tut-panel.collapsed .tut-dots,
.tut-panel.collapsed .tut-foot,
.tut-panel.collapsed .tut-toc{ display:none }

/* Kopfleiste */
.tut-top{
  display:flex; align-items:center; gap:6px;
  padding:8px 10px; background:rgba(0,0,0,.5);
  border-bottom:1px solid #4a3828; flex:0 0 auto;
}
.tut-brand{
  font-family:var(--mono); font-size:.64rem; letter-spacing:1.2px;
  color:var(--gold); text-transform:uppercase; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.tut-count{
  font-family:var(--mono); font-size:.64rem; color:var(--muted);
  margin-left:auto; white-space:nowrap;
}
.tut-ico{
  flex:0 0 auto; width:24px; height:24px;
  background:rgba(0,0,0,.35); border:1px solid #4a3828;
  color:var(--muted); cursor:pointer; font-size:.72rem; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.tut-ico:hover{ color:var(--gold); border-color:var(--gold) }
.tut-ico.on{ color:var(--gold); border-color:var(--gold); background:rgba(240,192,64,.12) }
.tut-ico.x:hover{ color:var(--bad); border-color:rgba(208,32,32,.5) }

.tut-progress{ height:3px; background:#0a0604; flex:0 0 auto }
.tut-progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--acc-d),var(--gold));
  transition:width .3s ease;
}

/* Inhaltsverzeichnis */
.tut-toc{
  flex:0 0 auto; max-height:46vh; overflow-y:auto;
  padding:8px; background:rgba(0,0,0,.4);
  border-bottom:1px solid #4a3828;
}
.tut-toc-head{
  font-family:var(--mono); font-size:.6rem; letter-spacing:1.2px;
  color:var(--gold); text-transform:uppercase; margin:2px 4px 8px;
}
.tut-toc-ch{
  font-family:'Oswald',sans-serif; font-size:.72rem; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--gold);
  margin:10px 4px 4px; padding-bottom:3px; border-bottom:1px dashed #4a3828;
}
.tut-toc-item{
  display:flex; align-items:center; gap:8px; width:100%;
  background:none; border:1px solid transparent; border-left:2px solid transparent;
  color:var(--muted); font:inherit; font-size:.78rem;
  text-align:left; padding:5px 7px; cursor:pointer; transition:.12s;
}
.tut-toc-item:hover{ background:rgba(255,255,255,.04); color:var(--txt) }
.tut-toc-item.seen{ color:#8fae4e }
.tut-toc-item.active{
  background:rgba(240,192,64,.1); color:var(--gold);
  border-left-color:var(--gold);
}
.tut-toc-ico{ flex:0 0 auto; width:16px; text-align:center }

/* Körper */
.tut-body{
  flex:1 1 auto; overflow-y:auto; padding:14px 16px 16px; min-height:0;
}
.tut-body::-webkit-scrollbar{ width:6px }
.tut-body::-webkit-scrollbar-thumb{ background:var(--line2) }

.tut-chapbar{ display:flex; align-items:center; gap:8px; margin-bottom:10px }
.tut-chap{
  font-family:var(--mono); font-size:.6rem; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--muted);
  background:rgba(0,0,0,.35); border:1px solid #4a3828; padding:3px 8px;
}
.tut-tag{
  font-family:var(--mono); font-size:.56rem; letter-spacing:1px;
  text-transform:uppercase; padding:2px 6px; border:1px solid;
}
.tut-tag.opt{ color:var(--muted); border-color:var(--line2) }

.tut-step-head{ display:flex; align-items:flex-start; gap:11px; margin-bottom:10px }
.tut-step-ico{
  flex:0 0 auto; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; background:rgba(0,0,0,.4); border:1px solid #4a3828;
}
.tut-step-id{ min-width:0 }
.tut-step-nav{
  display:block; font-family:var(--mono); font-size:.6rem;
  letter-spacing:1px; text-transform:uppercase; color:var(--acc);
}
.tut-step-head h2{
  margin:2px 0 0; font-size:1.12rem; letter-spacing:1px;
  text-transform:uppercase; color:var(--gold); line-height:1.2;
}

.tut-live{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  padding:6px 9px; margin-bottom:10px;
  background:rgba(80,168,48,.06); border:1px solid rgba(80,168,48,.22);
  border-left:2px solid var(--ok);
  font-family:var(--mono); font-size:.66rem; color:#c3e2ab;
}
.tut-live-dot{
  width:7px; height:7px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 6px var(--ok); animation:pulse 2s infinite; flex:0 0 auto;
}
.tut-mini{
  margin-left:auto; background:rgba(0,0,0,.35); border:1px solid #4a3828;
  color:var(--gold); font-family:var(--mono); font-size:.6rem;
  letter-spacing:.5px; text-transform:uppercase; padding:3px 8px; cursor:pointer;
}
.tut-mini:hover{ border-color:var(--gold); background:rgba(240,192,64,.12) }

.tut-lead{ font-size:.9rem; line-height:1.55; color:#d8d0c4; margin:0 0 10px }
.tut-lead b{ color:var(--txt) }

.tut-points{ list-style:none; margin:0 0 10px; padding:0 }
.tut-points li{
  position:relative; padding:5px 0 5px 18px;
  font-size:.83rem; line-height:1.5; color:#cfc7bb;
  border-bottom:1px dashed rgba(74,56,40,.55);
}
.tut-points li:last-child{ border-bottom:0 }
.tut-points li::before{
  content:"\25B8"; position:absolute; left:2px; top:5px;
  color:var(--acc); font-size:.78rem;
}
.tut-points b{ color:var(--gold) }
.tut-points code, .tut-lead code{
  font-size:.78em; padding:1px 5px; color:var(--gold);
}

/* Ingame-Befehle */
.tut-cmds-h{
  font-family:var(--mono); font-size:.6rem; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--gold); margin:12px 0 5px;
}
.tut-cmds{
  display:grid; grid-template-columns:auto 1fr; gap:5px 10px;
  padding:9px 11px; background:rgba(0,0,0,.35); border:1px solid #4a3828;
  align-items:baseline; margin-bottom:10px;
}
.tut-cmds code{
  white-space:nowrap; font-size:.72rem; color:var(--gold);
  background:#0a0604; border:1px solid #4a3828; padding:1px 6px;
}
.tut-cmds span{ font-family:var(--mono); font-size:.72rem; color:#cfc7bb; line-height:1.45 }

/* Checkliste */
.tut-do{ display:flex; flex-direction:column; gap:5px; margin:4px 0 10px }
.tut-do-item{
  display:flex; align-items:center; gap:9px;
  padding:7px 9px; background:rgba(0,0,0,.3);
  border:1px solid #4a3828; border-left:3px solid var(--line2);
  font-size:.8rem; line-height:1.4; color:#cfc7bb;
}
.tut-do-item.ok{ border-left-color:var(--ok); opacity:.72 }
.tut-do-box{
  flex:0 0 auto; width:19px; height:19px;
  display:flex; align-items:center; justify-content:center;
  background:#0a0604; border:1px solid #4a3828;
  font-size:.72rem; color:var(--ok);
}
.tut-do-item.ok .tut-do-box{ border-color:var(--ok) }

.tut-acts{ margin:10px 0 4px }
.tut-btn.wide{ width:100%; justify-content:center }

.tut-hint{
  padding:8px 10px; margin-top:10px;
  background:rgba(240,160,48,.07); border:1px solid rgba(240,160,48,.28);
  border-left:2px solid var(--warn);
  font-family:var(--mono); font-size:.72rem; line-height:1.5; color:#f0d28a;
}
.tut-warn{
  padding:8px 10px; margin:8px 0 2px;
  background:rgba(208,32,32,.08); border:1px solid rgba(208,32,32,.3);
  border-left:2px solid var(--bad);
  font-family:var(--mono); font-size:.72rem; line-height:1.5; color:#f0a79c;
}
.tut-ok{
  padding:8px 10px; margin:8px 0 2px;
  background:rgba(80,168,48,.07); border:1px solid rgba(80,168,48,.28);
  border-left:2px solid var(--ok);
  font-family:var(--mono); font-size:.72rem; line-height:1.5; color:#c3e2ab;
}

/* Kapitelpunkte */
.tut-dots{
  display:flex; gap:5px; justify-content:center; flex-wrap:wrap;
  padding:8px 10px 0; flex:0 0 auto;
}
.tut-dot{
  width:26px; height:5px; padding:0; cursor:pointer;
  background:#0a0604; border:1px solid #4a3828; transition:.15s;
}
.tut-dot:hover{ border-color:var(--gold) }
.tut-dot.seen{ background:rgba(143,174,78,.5) }
.tut-dot.active{ background:var(--gold); border-color:var(--gold) }

/* Fuß */
.tut-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:10px; border-top:1px solid #4a3828;
  background:rgba(0,0,0,.35); flex:0 0 auto;
}
.tut-foot-right{ display:flex; gap:6px }
.tut-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Oswald',sans-serif; font-size:.76rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  padding:8px 14px; cursor:pointer; border:1px solid #4a3828;
  background:rgba(0,0,0,.35); color:var(--txt); transition:.15s;
}
.tut-btn:hover{ border-color:var(--gold); color:var(--gold) }
.tut-btn[disabled]{ opacity:.35; cursor:not-allowed }
.tut-btn.primary{
  background:linear-gradient(180deg,var(--acc),var(--acc-d));
  border-color:transparent; color:#fff;
}
.tut-btn.primary:hover{ filter:brightness(1.15); color:#fff }
.tut-btn.link{
  background:none; border-color:transparent; color:var(--muted);
  font-size:.68rem; padding:8px 4px;
}
.tut-btn.link:hover{ color:var(--bad) }

/* Optionales Ausweichen des Layouts (⇔) */
body.tut-shift .view{
  padding-right:calc(18px + var(--tut-w));
  transition:padding .25s ease;
}
body.tut-shift.tut-left .view{
  padding-right:18px; padding-left:calc(18px + var(--tut-w));
}
@media(max-width:1200px){
  body.tut-shift .view,
  body.tut-shift.tut-left .view{ padding-right:18px; padding-left:18px }
}

/* Menü-Hervorhebung */
.tut-spot{
  position:relative;
  box-shadow:0 0 0 2px var(--gold), 0 0 14px rgba(240,192,64,.45) !important;
  border-radius:var(--r-s);
  animation:tutSpot 1.8s ease-in-out infinite;
}
@keyframes tutSpot{
  50%{ box-shadow:0 0 0 2px var(--acc), 0 0 20px rgba(224,101,26,.55) !important }
}
.tut-spot-hard{
  background:rgba(240,192,64,.16) !important;
  color:var(--gold) !important;
}

/* Mobil: unten als Blatt, volle Breite */
@media(max-width:760px){
  .tut-panel, .tut-panel.left{
    top:auto; bottom:0; left:0; right:0;
    width:100%; max-width:none;
    max-height:72vh; border-left:0; border-right:0; border-bottom:0;
    transform:translateY(24px); border-radius:3px 3px 0 0;
  }
  .tut-panel.open{ transform:none }
  .tut-panel:not(:hover){ opacity:1 }
  #tutShift, #tutSide{ display:none }
  .tut-body{ padding:12px 13px 14px }
  .tut-dot{ width:20px }
}