/* =========================================================================
   WALYSER — ANFÄNGER-EBENE
   Zwei Dinge, die Einsteigern auf Portfolio, Markt und Sicherheit gefehlt
   haben:
     1. Eine Reihenfolge. Vorher lagen 8–13 gleich große Karten nebeneinander,
        ohne dass irgendwo stand, womit man anfängt.
     2. Klartext. Namen wie „Contagion Map" sagen einem Neuling nichts.
   Beides schaltet der Anfänger-Modus zu — Fortgeschrittene schalten ihn ab
   und sehen wieder alles auf einmal.
   ========================================================================= */

/* ── Einstiegsleiste „In 3 Schritten" ────────────────────────────────── */
/* Bewusst KEINE Karte: nur eine Zeile mit Haarlinie darunter. Eingeklappt
   ist das eine einzige ruhige Zeile, die sich nicht vordrängt. */
.guideStart{position:relative;z-index:2;padding:0}
.gsBox{border-bottom:1px solid var(--line,#ffffff14);padding:0 0 4px}

.gsHead{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:12px 0;
}

/* Titel und Ausklapper sind ein einziger, flacher Knopf */
.gsFold{
  display:inline-flex;align-items:center;gap:9px;
  border:0;background:none;padding:0;cursor:pointer;
  color:#aeb4c5;font-family:inherit;font-size:13px;font-weight:600;
  transition:color .15s;
}
.gsFold:hover{color:#fff}
.gsChev{
  font-size:9px;color:#697187;
  transition:transform .25s ease,color .15s;
}
.gsFold:hover .gsChev{color:#aeb4c5}

/* Schalter Anfänger-Modus — kleiner und ohne Beiwerk */
.gsToggle{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;flex-shrink:0}
.gsToggle input{position:absolute;opacity:0;pointer-events:none}
.gsTrack{
  width:34px;height:19px;border-radius:999px;background:#ffffff10;
  border:1px solid var(--line,#ffffff1a);position:relative;
  transition:background .2s,border-color .2s;
}
.gsKnob{
  position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:#8890a3;transition:transform .2s,background .2s;
}
.gsToggle input:checked + .gsTrack{background:#7c5cff3a;border-color:#8a72ff66}
.gsToggle input:checked + .gsTrack .gsKnob{transform:translateX(15px);background:#fff}
.gsLbl{font-size:12px;font-weight:600;color:#8890a3}
.gsToggle:hover .gsLbl{color:#cbd0dc}

/* Die drei Schritte — schlichte Zeilen statt Kacheln mit Rahmen */
.gsSteps{
  list-style:none;margin:0;padding:0 0 16px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.gsSteps a{
  display:flex;align-items:flex-start;gap:10px;height:100%;
  padding:10px 12px;border-radius:12px;text-decoration:none;
  background:transparent;transition:background .18s;
}
.gsSteps a:hover{background:#ffffff07}
.gsNum{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:6px;margin-top:1px;
  background:#ffffff0d;border:1px solid var(--line,#ffffff1a);
  color:#8fe9ff;font:10px ui-monospace,monospace;font-weight:700;
}
.gsSteps a > span:last-child{display:flex;flex-direction:column;gap:3px}
.gsT{font-size:13px;font-weight:600;color:#cbd0dc;line-height:1.35}
.gsSteps a:hover .gsT{color:#fff}
.gsD{font-size:11.5px;color:#697187;line-height:1.5}
@media(max-width:820px){
  .gsSteps{grid-template-columns:1fr;gap:2px}
  .gsHead{gap:10px;padding:11px 0}
}

/* ── Klartext-Zeile unter jedem Werkzeug-Titel ───────────────────────── */
.plainLine{
  display:none;
  margin:-2px 0 12px;padding:9px 12px;border-radius:11px;
  border:1px solid #62eaff26;background:#62eaff0a;
  color:#bfe9f7;font-size:12.5px;line-height:1.55;
}
.plainLine b{color:#8fe9ff;font-weight:700}
body.beginnerOn .plainLine{display:block}

/* ── Fortgeschrittenes wird im Anfänger-Modus eingeklappt ────────────── */
/* ── Werkzeuge für Fortgeschrittene: immer eingeklappt ───────────────── */
/* Früher hing das am Anfänger-Schalter. Das hieß: Wer die Erklärungen
   abschaltete, bekam plötzlich zusätzliche Karten zu sehen — ein Schalter
   mit zwei völlig verschiedenen Wirkungen. Jetzt liegen die selteneren
   Werkzeuge für alle hinter einem Knopf, und der Schalter macht nur noch
   eine einzige, vorhersehbare Sache: Erklärungen an oder aus. */
.dashView:not(.showAdv) .guideAdv{display:none !important}
.advBar{display:block;margin:4px 0 18px}
.advBtn{
  width:100%;border:1px dashed var(--line,#ffffff26);background:#ffffff05;
  border-radius:14px;padding:13px 16px;cursor:pointer;
  color:#aeb4c5;font-size:12.5px;font-family:inherit;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:border-color .15s,color .15s,background .15s;
}
.advBtn:hover{border-color:#ffffff45;color:#fff;background:#ffffff0a}
.advBtn small{color:#697187;font-weight:400}

/* ── Merker im Anfänger-Modus: Was ist eine „Beispiel-Wallet"? ───────── */
.beginnerHint{
  display:none;align-items:flex-start;gap:10px;
  margin:0 0 16px;padding:13px 16px;border-radius:14px;
  border:1px solid var(--line,#ffffff1a);background:#ffffff05;
  color:#aeb4c5;font-size:12.5px;line-height:1.6;
}
body.beginnerOn .beginnerHint{display:flex}
.beginnerHint b{color:#fff}

/* ── Eingeklappt: es bleibt genau eine Zeile stehen ──────────────────── */
.gsBody{
  overflow:hidden;max-height:400px;opacity:1;
  transition:max-height .3s cubic-bezier(.16,1,.3,1),opacity .18s ease;
}
.gsBox.folded .gsBody{max-height:0;opacity:0}
.gsBox.folded{padding-bottom:0}
.gsBox.folded .gsChev{transform:rotate(-90deg)}