.sm-wrap { max-width: 960px; margin: 0 auto; }

.sm-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .25rem;
}
.sm-head h2 { margin: 0; }
.sm-back { color: #6c757d; font-size: .9rem; text-decoration: none; }
.sm-back:hover { color: var(--bg); }
.sm-lead { margin: 0 0 1.25rem; font-size: .92rem; color: #495057; }

/* ---- zweispaltiges Layout: links ~20%, rechts der Rest ---- */
.sm-layout {
  display: grid;
  grid-template-columns: minmax(190px, 21%) 1fr;
  gap: 1.25rem;
  align-items: start;
}

/* linke Spalte: Manöverliste */
.sm-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  position: sticky;
  top: 1rem;
}
.sm-item {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  text-align: left;
  width: 100%;
  border: 1px solid #e3ecf7;
  border-left: 4px solid transparent;
  background: #fff;
  border-radius: 10px;
  padding: .6rem .7rem;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.sm-item:hover { background: #f3f8ff; }
.sm-item:active { transform: scale(.985); }
.sm-item:focus-visible { outline: 2px solid var(--highlight); outline-offset: 2px; }
.sm-item.is-active {
  background: var(--bg);
  border-color: var(--bg);
  border-left-color: var(--highlight);
  color: #fff;
  box-shadow: 0 4px 14px rgba(11, 37, 69, .22);
}
.sm-item-emoji { font-size: 1.15rem; line-height: 1.3; flex: 0 0 auto; }
.sm-item-text { display: flex; flex-direction: column; min-width: 0; }
.sm-item-name { font-weight: 600; font-size: .95rem; }
.sm-item-sum {
  font-size: .72rem;
  color: var(--muted);
  line-height: 1.3;
  margin-top: .15rem;
}
.sm-item.is-active .sm-item-sum { color: #cfe2ff; }

/* rechte Spalte: Detailpanels */
.sm-detail { min-width: 0; }
.sm-panel { display: none; }
.sm-panel.is-active { display: block; animation: sm-fade .25s ease; }
@keyframes sm-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sm-panel-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  /* globale <header>-Styles aus base.css neutralisieren */
  background: transparent;
  color: var(--text);
  box-shadow: none;
  padding: 0 0 .6rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #eef3fa;
}
.sm-panel-head h3 { margin: 0; color: var(--bg); font-size: 1.5rem; }
.sm-panel-emoji { font-size: 1.6rem; }

.sm-panel-body {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 320px);
  gap: 1.5rem;
  align-items: start;
}
.sm-panel-text { min-width: 0; }
.sm-intro { margin: 0 0 1rem; line-height: 1.6; }

.sm-steps {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  line-height: 1.5;
}
.sm-steps li::marker { color: var(--bg); font-weight: 700; }

.sm-tip {
  margin: 0;
  padding: .7rem .9rem;
  background: #fff8e1;
  border-left: 4px solid var(--highlight);
  border-radius: 6px;
  font-size: .9rem;
  color: #6c5a00;
  line-height: 1.5;
}

.sm-figure { margin: 0; position: sticky; top: 1rem; }
.sm-figure-name {
  margin: 0 0 .5rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--bg);
  text-align: center;
}
.sm-figure img {
  width: 100%;
  display: block;
  background: #eaf2fb;
  border: 1px solid #dbe7f5;
  border-radius: 12px;
}
.sm-figure figcaption {
  margin-top: .5rem;
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
}
/* Fallback, wenn (noch) keine Skizze vorhanden ist */
.sm-figure--missing img { display: none; }
.sm-figure--missing .sm-figure-name { display: none; }
.sm-figure--missing::before {
  content: "Skizze folgt";
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(45deg, #eaf2fb, #eaf2fb 12px, #e1ecf8 12px, #e1ecf8 24px);
  border: 1px dashed #b9cde6;
  border-radius: 12px;
  color: #6c7a90;
  font-size: .85rem;
}

/* ---- Mobil: untereinander ---- */
@media (max-width: 720px) {
  .sm-layout { grid-template-columns: 1fr; }
  .sm-list { position: static; }
  .sm-item-sum { display: none; }
  .sm-panel-body { grid-template-columns: 1fr; }
  .sm-figure { position: static; order: -1; }
}