/* ════════════════════════════════════════════════════════════════════
   SIMPLEXITY · TUTORIAL LAYER
   Interaktive Tutorial-Rubrik: Hub-Dialog, Guided Tour (Spotlight +
   Coachmark), Erklärmodule, Mini-Diagramme, Media-Slots.
   Erbt die Tokens (--bg, --ink, --accent, --border, --r, --font …)
   aus index.html :root und body.light.
   ════════════════════════════════════════════════════════════════════ */

.tut-root,
.tut-root * { box-sizing:border-box; }

/* keine Geräusche/Scrollbars im Tool stören; eigener Stacking-Kontext */
.tut-hub,
.tut-tour { font-family:var(--font); color:var(--ink); }

/* ─── HUB ──────────────────────────────────────────────────────────── */
.tut-hub {
  position:fixed; inset:0; z-index:4000;
  display:none; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(8,8,7,.74);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .22s ease;
}
.tut-hub.open { display:flex; opacity:1; }

.tut-card {
  width:min(880px,100%);
  max-height:calc(100vh - 40px);
  display:flex; flex-direction:column;
  background:var(--panel-bg);
  border:1px solid var(--border-hi);
  border-radius:var(--r);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  transform:translateY(8px) scale(.99);
  transition:transform .26s cubic-bezier(.4,0,.2,1);
}
.tut-hub.open .tut-card { transform:none; }

.tut-hd {
  display:flex; justify-content:space-between; align-items:flex-start; gap:18px;
  padding:24px 28px 18px;
  border-bottom:1px solid var(--border);
}
.tut-kicker {
  font-size:9.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--accent); margin-bottom:9px;
}
.tut-title { font-size:23px; font-weight:400; letter-spacing:.005em; line-height:1.1; }
.tut-sub  { margin-top:9px; font-size:11px; line-height:1.5; color:var(--ink-dim); max-width:46ch; }

.tut-x {
  flex-shrink:0; width:30px; height:30px; position:relative;
  border:1px solid var(--border-hi); border-radius:var(--r);
  background:transparent; color:var(--ink-dim); cursor:pointer;
  transition:color .12s, border-color .12s;
}
.tut-x::before, .tut-x::after {
  content:''; position:absolute; left:50%; top:50%; width:11px; height:1.4px;
  background:currentColor;
}
.tut-x::before { transform:translate(-50%,-50%) rotate(45deg); }
.tut-x::after  { transform:translate(-50%,-50%) rotate(-45deg); }
.tut-x:hover { color:var(--ink); border-color:var(--ink-dim); }

.tut-body { padding:22px 28px 26px; overflow:auto; }

/* Abschnittsüberschrift */
.tut-sec-lbl {
  display:flex; align-items:center; gap:12px;
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted); margin:28px 0 14px;
}
.tut-sec-lbl:first-child { margin-top:0; }
.tut-sec-lbl::after { content:''; flex:1; height:1px; background:var(--border); }

/* Resume-Banner */
.tut-resume {
  display:none; align-items:center; gap:14px;
  padding:13px 15px; margin-bottom:6px;
  border:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius:var(--r);
  background:color-mix(in srgb, var(--accent) 9%, transparent);
}
.tut-resume.show { display:flex; }
.tut-resume-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent); animation:tutPulse 2.4s infinite; }
.tut-resume-txt { flex:1; font-size:10.5px; line-height:1.4; color:var(--ink); }
.tut-resume-txt small { display:block; color:var(--ink-dim); margin-top:2px; font-size:9.5px; letter-spacing:.04em; }

/* ─── Start-Karten ─────────────────────────────────────────────────── */
.tut-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.tut-card-opt {
  text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:0;
  padding:18px 16px 16px;
  border:1px solid var(--border-hi); border-radius:var(--r);
  background:rgba(230,226,214,.018);
  color:var(--ink);
  transition:border-color .14s, background .14s, transform .14s;
}
body.light .tut-card-opt { background:rgba(28,26,22,.016); }
.tut-card-opt:hover { border-color:color-mix(in srgb,var(--accent) 55%,transparent); transform:translateY(-2px); }
.tut-card-opt:active { transform:translateY(0) scale(.985); }
.tut-card-ico { width:26px; height:26px; color:var(--accent); margin-bottom:13px; }
.tut-card-ico svg { width:100%; height:100%; }
.tut-card-ttl { font-size:13px; letter-spacing:.01em; margin-bottom:6px; }
.tut-card-desc { font-size:10px; line-height:1.5; color:var(--ink-dim); flex:1; }
.tut-card-meta { margin-top:13px; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.tut-card-opt:hover .tut-card-meta { color:var(--accent); }

/* ─── Use-Case-Chips ───────────────────────────────────────────────── */
.tut-chips { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.tut-chip {
  text-align:left; cursor:pointer;
  display:flex; align-items:flex-start; gap:11px;
  padding:13px 14px;
  border:1px solid var(--border); border-radius:var(--r);
  background:transparent; color:var(--ink);
  transition:border-color .14s, background .14s, transform .12s;
}
.tut-chip:hover { border-color:var(--ink-dim); background:rgba(230,226,214,.022); transform:translateY(-1px); }
body.light .tut-chip:hover { background:rgba(28,26,22,.02); }
.tut-chip-num {
  flex-shrink:0; width:20px; height:20px; border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  font-size:9.5px; color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
}
.tut-chip-tx { display:flex; flex-direction:column; gap:3px; min-width:0; }
.tut-chip-tx b { font-size:11px; font-weight:400; letter-spacing:.005em; }
.tut-chip-tx span { font-size:9.5px; line-height:1.45; color:var(--ink-dim); }

/* ─── Erklärmodule: Flow-Diagramme ─────────────────────────────────── */
.tut-flow {
  display:flex; align-items:stretch; gap:0; flex-wrap:wrap;
  padding:18px 16px; margin-bottom:12px;
  border:1px solid var(--border); border-radius:var(--r);
  background:rgba(230,226,214,.015);
}
body.light .tut-flow { background:rgba(28,26,22,.013); }
.tut-flow-cap {
  flex-basis:100%; font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px;
}
.tut-node {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  flex:1; min-width:64px; padding:0 4px;
}
.tut-node-box {
  width:100%; min-height:46px; max-width:120px;
  display:flex; align-items:center; justify-content:center;
  padding:8px 6px;
  border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
  border-radius:3px;
  color:var(--ink);
  position:relative;
  background:color-mix(in srgb,var(--accent) 6%,transparent);
}
.tut-node-box svg { width:20px; height:20px; color:var(--accent); }
.tut-node-lbl { font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); text-align:center; line-height:1.25; }
.tut-arrow {
  flex:0 0 30px; align-self:flex-start; margin-top:21px;
  display:flex; align-items:center; justify-content:center; color:var(--accent);
}
.tut-arrow svg { width:26px; height:10px; }

/* ─── Before / After ───────────────────────────────────────────────── */
.tut-ba { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:10px; }
.tut-ba-tile {
  border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
  background:#000; position:relative; aspect-ratio:4/3;
}
body.light .tut-ba-tile { background:#e7e2d6; }
.tut-ba-tile svg { width:100%; height:100%; display:block; }
.tut-ba-cap {
  position:absolute; left:0; right:0; bottom:0;
  padding:6px 8px; font-size:8.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim); background:linear-gradient(transparent, rgba(0,0,0,.55));
}
body.light .tut-ba-cap { background:linear-gradient(transparent, rgba(247,244,238,.85)); }
.tut-ba-arrow { color:var(--accent); display:flex; align-items:center; }
.tut-ba-arrow svg { width:20px; height:12px; }

/* ─── Media-Slot (Screenshot / GIF / Video Platzhalter) ─────────────── */
.tut-media {
  position:relative; border:1px dashed var(--border-hi); border-radius:var(--r);
  background:rgba(230,226,214,.02); overflow:hidden;
  display:flex; align-items:center; justify-content:center; min-height:120px;
}
body.light .tut-media { background:rgba(28,26,22,.018); }
.tut-media img { width:100%; height:100%; object-fit:cover; display:block; }
.tut-media-ph {
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:18px; text-align:center;
}
.tut-media-ph svg { width:30px; height:30px; color:var(--muted); }
.tut-media-ph b { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); font-weight:400; }
.tut-media-ph code {
  font-size:9px; color:var(--accent); letter-spacing:.02em;
  border:1px solid var(--border); border-radius:3px; padding:3px 7px;
  background:rgba(0,0,0,.18);
}
body.light .tut-media-ph code { background:rgba(28,26,22,.05); }
.tut-media-tag {
  position:absolute; top:8px; left:8px;
  font-size:8px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); border-radius:3px;
  padding:2px 6px; background:rgba(0,0,0,.3);
}
body.light .tut-media-tag { background:rgba(247,244,238,.7); }

.tut-media-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* Footer */
.tut-foot {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  margin-top:28px; padding-top:18px; border-top:1px solid var(--border);
}
.tut-foot-note { font-size:9.5px; line-height:1.5; color:var(--muted); max-width:52ch; }

/* ─── Buttons (Spiegel von .action) ────────────────────────────────── */
.tut-btn {
  appearance:none; height:31px; padding:0 14px;
  border:1px solid var(--border-hi); border-radius:var(--r);
  background:transparent; color:var(--ink-dim);
  font-family:var(--font); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap;
  transition:color .12s, border-color .12s, background .12s, transform .12s;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
}
.tut-btn:hover { color:var(--ink); border-color:var(--ink-dim); transform:translateY(-1px); }
.tut-btn:active { transform:translateY(0) scale(.97); }
.tut-btn:disabled { opacity:.32; cursor:default; transform:none; }
.tut-btn.primary {
  color:var(--ink); border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
}
.tut-btn.primary:hover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 20%,transparent); }
.tut-btn.ghost { border-color:transparent; }
.tut-btn.ghost:hover { border-color:var(--border-hi); }

/* ═══ GUIDED TOUR ═══════════════════════════════════════════════════ */
.tut-tour { position:fixed; inset:0; z-index:4200; pointer-events:none; display:none; }
.tut-tour.open { display:block; }

/* Spotlight: dimmt die Umgebung über box-shadow, lässt das Ziel aber
   anklickbar (pointer-events:none → Klicks gehen durch). */
.tut-spot {
  position:fixed; left:0; top:0; width:0; height:0;
  border-radius:6px;
  pointer-events:none;
  box-shadow:0 0 0 9999px rgba(10,10,9,.70),
             inset 0 0 0 1.5px var(--accent),
             inset 0 0 20px 2px color-mix(in srgb,var(--accent) 22%,transparent);
  transition:left .28s cubic-bezier(.4,0,.2,1), top .28s cubic-bezier(.4,0,.2,1),
             width .28s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1);
}
body.light .tut-spot { box-shadow:0 0 0 9999px rgba(28,26,22,.42),
             inset 0 0 0 1.5px var(--accent),
             inset 0 0 20px 2px color-mix(in srgb,var(--accent) 24%,transparent); }
.tut-spot::after {
  content:''; position:absolute; inset:-5px; border-radius:9px;
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  animation:tutRing 2.2s ease-out infinite;
}
@keyframes tutRing {
  0%   { transform:scale(.97); opacity:.0; }
  35%  { opacity:.7; }
  100% { transform:scale(1.06); opacity:0; }
}
@keyframes tutPulse {
  0%   { box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent); }
  70%  { box-shadow:0 0 0 7px transparent; }
  100% { box-shadow:0 0 0 0 transparent; }
}

/* Coachmark */
.tut-coach {
  position:fixed; left:0; top:0;
  width:min(346px,calc(100vw - 26px));
  background:var(--panel-bg);
  border:1px solid var(--border-hi);
  border-radius:var(--r);
  box-shadow:var(--shadow-lg);
  pointer-events:auto;
  overflow:hidden;
  opacity:0; transform:translateY(4px);
  transition:left .28s cubic-bezier(.4,0,.2,1), top .28s cubic-bezier(.4,0,.2,1);
}
.tut-coach.show { opacity:1; transform:none; }
.tut-coach-prog { height:2px; background:var(--accent); width:0; transition:width .32s ease; }
.tut-coach-in { padding:15px 17px 16px; }
.tut-coach-top {
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px;
}
.tut-coach-badge { font-size:8.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
.tut-coach-count { font-size:9px; letter-spacing:.1em; color:var(--muted); font-variant-numeric:tabular-nums; }
.tut-coach-ttl { font-size:14.5px; font-weight:400; letter-spacing:.005em; line-height:1.2; margin-bottom:8px; }
.tut-coach-bd  { font-size:11px; line-height:1.55; color:var(--ink-dim); }
.tut-coach-bd kbd {
  font-family:var(--font); font-size:10px; color:var(--ink);
  border:1px solid var(--border-hi); border-radius:3px; padding:1px 5px; margin:0 1px;
  background:rgba(230,226,214,.05);
}
body.light .tut-coach-bd kbd { background:rgba(28,26,22,.05); }

/* Mini-Flow im Coachmark */
.tut-coach-flow {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:13px; padding-top:13px; border-top:1px solid var(--border);
}
.tut-coach-flow .cf {
  font-size:8.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); padding:3px 7px; border:1px solid var(--border); border-radius:3px;
}
.tut-coach-flow .cf.on { color:var(--ink); border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent); }
.tut-coach-flow .cfa { color:var(--accent); font-size:10px; }

.tut-coach-demo {
  width:100%; margin-top:13px;
}

.tut-coach-nav {
  display:flex; align-items:center; gap:8px; margin-top:14px;
}
.tut-coach-nav .spacer { flex:1; }
.tut-coach-skip {
  background:none; border:none; cursor:pointer; padding:4px 2px;
  font-family:var(--font); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); transition:color .12s;
}
.tut-coach-skip:hover { color:var(--ink-dim); }

/* Erste-Besuch-Hinweis am Tutorial-Button */
.tut-firsthint {
  position:fixed; z-index:3900;
  display:none; align-items:center; gap:10px;
  padding:10px 13px;
  background:var(--panel-bg); border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
  border-radius:var(--r); box-shadow:var(--shadow-md);
  max-width:240px;
}
.tut-firsthint.show { display:flex; }
.tut-firsthint-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; animation:tutPulse 2.2s infinite; }
.tut-firsthint-tx { font-size:10px; line-height:1.4; color:var(--ink); }
.tut-firsthint-tx b { color:var(--accent); font-weight:400; }
.tut-firsthint-x { background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:0 0 0 4px; }
.tut-firsthint-x:hover { color:var(--ink); }

/* Glow am Tutorial-Button bei aktiver Tour-Verfügbarkeit */
#openTutorial.tut-pulse { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),
  inset 0 0 18px color-mix(in srgb,var(--accent) 16%,transparent); color:var(--ink); }

/* ─── Mobil ────────────────────────────────────────────────────────── */
@media (max-width:720px) {
  .tut-cards { grid-template-columns:1fr; }
  .tut-chips { grid-template-columns:1fr; }
  .tut-media-grid { grid-template-columns:1fr; }
  .tut-ba { grid-template-columns:1fr; }
  .tut-ba-arrow { transform:rotate(90deg); justify-self:center; }
  .tut-title { font-size:20px; }
  .tut-hd { padding:18px 18px 14px; }
  .tut-body { padding:18px 18px 22px; }

  .tut-coach {
    left:10px !important; right:10px;
    width:auto; bottom:10px; top:auto !important;
  }
  .tut-coach.show { transform:none; }
}

@media (prefers-reduced-motion:reduce) {
  .tut-spot, .tut-coach, .tut-card { transition:opacity .15s ease; }
  .tut-spot::after, .tut-resume-dot, .tut-firsthint-dot { animation:none; }
}