/* training-menu.css – Training: strukturierter, größer, eigener Accent */

.training{
  --t-accent: rgba(186, 140, 255, .95);
  --t-accentSoft: rgba(186, 140, 255, .14);
  --t-panel: rgba(15,22,34,.72);
}

/* Header badge leicht “training tint” */
.badge{
  font-size:12px;
  color:var(--muted);
  border:1px solid rgba(255,255,255,.12);
  padding:4px 10px;
  border-radius:999px;
  background:
    linear-gradient(90deg, rgba(186,140,255,.10), rgba(136,255,204,.06));
}

/* Head */
.train-head{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  align-items:start;
  margin-top: 6px;
  margin-bottom: 14px;
}
@media (max-width: 980px){
  .train-head{ grid-template-columns: 1fr; }
}

.train-title{
  margin:0 0 6px;
  font-size: 34px;
  letter-spacing:.2px;
}
.train-sub{
  margin:0;
  max-width: 64ch;
  line-height:1.55;
}

.train-actions{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Guide block (statt Session) */
.train-guide{
  border-radius: 20px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 280px at 20% 0%, var(--t-accentSoft), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 70%),
    var(--t-panel);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.guide-top{
  padding: 12px 12px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.guide-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
}
.guide-badge{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(186,140,255,.26);
  background: rgba(186,140,255,.10);
  color: rgba(232,238,252,.95);
}

.guide-list{
  margin:0;
  padding: 12px 16px 10px 22px;
  display:grid;
  gap:8px;
}
.guide-list li{ line-height:1.5; }

.guide-foot{
  padding: 10px 12px 12px;
  border-top:1px solid rgba(255,255,255,.08);
}

/* Section head */
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin: 10px 0 12px;
  flex-wrap:wrap;
}
.section-title{
  margin:0;
  font-size:18px;
  letter-spacing:.2px;
}
.section-sub{ margin:0; max-width: 70ch; }

/* Big mode rows */
.mode-row{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 70%),
    rgba(12,18,28,.55);
  box-shadow: var(--shadow);
  padding: 16px;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 14px;
  position:relative;
  overflow:hidden;
}

.mode-row::after{
  content:"";
  position:absolute;
  inset:-60px -80px auto auto;
  width:260px;
  height:260px;
  background: radial-gradient(circle at 30% 30%, var(--t-accentSoft), transparent 60%);
  transform: rotate(18deg);
  pointer-events:none;
}

.mode-left{
  display:flex;
  gap:14px;
  flex: 1;
  min-width: 0;
}
.mode-icon{
  width:56px;
  height:56px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  font-size: 26px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  flex: 0 0 auto;
}

.mode-text h3{
  margin: 2px 0 8px;
  font-size: 20px;
  letter-spacing:.2px;
}
.mode-text p{
  margin:0 0 12px;
  line-height: 1.55;
  max-width: 78ch;
}

/* Points = mehr “Struktur” */
.mode-points{
  display:grid;
  gap: 8px;
  margin-bottom: 12px;
}
.point{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding: 10px 10px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}
.point .dot{
  width:8px; height:8px;
  border-radius:999px;
  margin-top: 6px;
  background: rgba(186,140,255,.90);
  box-shadow: 0 0 0 4px rgba(186,140,255,.12);
  flex: 0 0 auto;
}

/* Chips */
.mode-chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* Right side CTA */
.mode-right{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  gap:8px;
  flex: 0 0 auto;
  min-width: 210px;
}

.micro{ opacity:.9; }

/* Responsiveness */
@media (max-width: 980px){
  .mode-row{
    flex-direction:column;
  }
  .mode-right{
    align-items:stretch;
    min-width: unset;
  }
  .mode-right .btn{ width: 100%; }
}

.mode-row{
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.mode-row:hover{
  transform: translateY(-2px);
  border-color: rgba(186,140,255,.28);
  background:
    linear-gradient(180deg, rgba(186,140,255,.07), transparent 75%),
    rgba(12,18,28,.58);
}